Share
Ce que vous allez créerAu cours de ce didacticiel, je vais vous expliquer le processus de création de styles d'élément Web sophistiqués dans Photoshop, mais sans utiliser un seul fichier image dans votre site Web fini. Lorsque nous aurons terminé, vous disposerez d'une seule mise en page avec tous les éléments d'interface utilisateur que vous voyez dans l'aperçu ci-dessus, en n'utilisant que CSS3, le code Base64 et les icônes de police..
En créant une conception "sans image", vous pouvez limiter le temps de chargement et le nombre de requêtes HTTP au maximum, tout en garantissant le niveau de flexibilité le plus élevé possible pour les éléments de l'interface utilisateur. Les éléments d'interface utilisateur de code pur peuvent être rapidement et facilement modifiés via CSS, de la même manière que les images statiques ne peuvent pas être modifiées et réexportées manuellement.
Pour ce faire, nous allons utiliser quatre ressources clés:
* Vous pouvez utiliser un préprocesseur différent si vous préférez.
En réunissant ces éléments, il est possible de générer un code pur et pratiquement identique au PSD d'origine:
Le PSD
Le résultat de code pur (visualisé dans Firefox)Ce tutoriel sera divisé en deux parties:
Au cours de cette première partie, nous présenterons les types de techniques que vous pouvez utiliser dans Photoshop lors de la création d’une conception conviviale pour CSS3 et Base64. Bien que nous puissions obtenir beaucoup de choses avec du code pur de nos jours, nous ne pouvons pas encore traduire absolument tout ce que vous pouvez trouver dans Photoshop. Il est donc important de garder à l’esprit les choses à faire et à ne pas faire lorsque vous partez.
Commençons par un bref aperçu de CSSHat et PNGHat, les plugins Photoshop que nous utiliserons pour générer notre code CSS3 et Base64..
Avec le plugin CSSHat installé, vous pouvez cliquer sur n’importe quel calque de votre document Photoshop et la fenêtre CSSHat affichera instantanément le code prêt pour la production..
CSSHat interprète principalement à partir de vos paramètres de style de calque. Vous devez donc viser à ajouter vos dégradés et vos bordures via des styles de calque plutôt que par l'une des méthodes alternatives de Photoshop..
Accentsconagua
px (optionnel)famille de polices, taille de police, poids de police (gras / normal), le style de police PNGHat peut faire beaucoup de choses. Découvrez comment exporter des ressources Photoshop pour le Web avec PNGHat pour un aperçu complet du plug-in.
Dans le cas de ce tutoriel, nous allons l'utiliser pour générer du code Base64 qui constituera l'image d'arrière-plan de la conception. Vous verrez bientôt comment cela fonctionne dans la pratique..
Lorsqu'une image est convertie en Base64, vous obtenez une chaîne de texte qui peut ensuite être incorporée directement dans CSS. Plus il y a de données dans l'image, plus la chaîne est longue, c'est pourquoi Base64 convient mieux à la mosaïque d'images avec peu de couleurs.
Pour bien démarrer, il vous faut quelques petites choses.
Pour commencer, vous devez avoir les plugins CSSHat et PNGHat installés.
Si vous ne pouvez pas acheter une copie de CSSHat, vous pouvez toujours suivre et utiliser la fonctionnalité intégrée "Copier CSS" de Photoshop, qui peut être sélectionnée dans le menu contextuel après avoir cliqué avec le bouton droit de la souris sur un calque..
Cependant, dans ce cas, vous devrez supprimer manuellement le code par défaut non souhaité pour des éléments tels que le positionnement absolu, l'index z, les dimensions et les noms de classe. De plus, il ne gère pas la génération de plusieurs ombres et dégradés ainsi que CSSHat, et il ne peut pas produire de code prêt pour LESS, Sass / SCSS ou Stylus..
Si vous ne pouvez pas acheter PNGHat, vous pouvez exporter manuellement votre image d’arrière-plan, puis la soumettre à un convertisseur en ligne tel que: http://webcodertools.com/imagetobase64converter.
Je recommande également vivement un troisième plugin de Source nommé Subtle Patterns. Ce plugin ajouté ajoute une bibliothèque de centaines de motifs à Photoshop, chacun d'entre eux pouvant être instantanément appliqué en superposition de motif à n'importe quel calque..
Au lieu d'utiliser le plugin Subtle Patterns, vous pouvez simplement parcourir les modèles et les télécharger gratuitement..
Remarque: Je sais ce que vous pourriez vous demander - ça fait beaucoup de choses par Source, est-ce un article sponsorisé? La vérité est que j'ai acheté toute la gamme de produits Source bien avant de commencer à écrire pour Tuts + et je les aime tous en raison du nombre d'heures qu'ils ont passées dans ma journée. Je recommande ces plugins parce que j'ai été très impressionné par ma propre expérience de la suite entière.
Nous allons placer des icônes dans votre conception via Font Awesome. Vous devrez donc télécharger la police et l'installer sur votre système..
La police de choix pour notre texte habituel sera Roboto, vous devez donc également l'installer. Vous pouvez l'obtenir de Google Webfonts.
Créez un nouveau document Photoshop d'une taille de 1600px X 2180px. Double-cliquez sur le calque "Arrière-plan" par défaut pour le déverrouiller, puis enregistrez votre PSD..
dans le Motifs subtils fenêtre (ou site Web), recherchez satin tisser. Quand vous le trouvez, avec votre Contexte calque sélectionné, cliquez sur la tuile du motif pour l'appliquer automatiquement en tant que superposition de motif.
Vous devriez maintenant voir des lignes verticales subtiles en niveaux de gris sur votre toile. Nous avons sélectionné ce modèle comme étant un bon choix pour la conversion en Base64 car il utilise très peu de couleurs et n’a que 24px par 12px, ce qui signifie qu’il produira une chaîne de code relativement petite..
Pour vous aider à encadrer la page, créez un rectangle en haut de votre document, sur toute la largeur et 8px En hauteur. Donnez-lui ces propriétés:
La couleur de remplissage: #dddddd
Opacité: 50%
Style de calque> Inner Shadow:
Ordinaire # c8c8c8 100% -90 2 4 Style de calque> Ombre portée:
Ordinaire #ffffff 100% 90 2 1 Votre "top trim" devrait ressembler à ceci:
En créant ce menu, nous verrons certains des effets pouvant être créés avec des dégradés, des ombres et des traits. Nous allons pour un menu en relief propre qui est assis dans une enveloppe encartée.
Pour commencer, nous allons créer le wrapper inséré qui contiendra le menu. Créez un rectangle d'angle arrondi et centré sur votre toile à l'adresse 1200px large par 61px haute. Définissez les propriétés suivantes:
La couleur de remplissage: # f9f9f9 - notez que même s'il y aura un dégradé sur ce rectangle, nous souhaitons toujours définir une couleur de remplissage comme solution de secours..
Propriétés> Propriétés de la forme dynamique> Rayon de coin: 12px
Style de calque> Inner Shadow:
Ordinaire # 000000 15% 90 1 dix Style de calque> Superposition de dégradé:
#ffffff # f3f3f3 Linéaire Style de calque> Ombre portée:
Ordinaire #ffffff 100% 90 1 2 Votre wrapper de menu devrait maintenant ressembler à ceci:
Créez un deuxième rectangle à coins arrondis au-dessus de l’emballage de votre menu, à 1190px large par 50px haut, avec son coin en haut à gauche 5px plus à droite et plus bas que le coin supérieur gauche de l’emballage du menu. Ajoutez ces propriétés:
La couleur de remplissage: #ffffff
Propriétés> Propriétés de la forme dynamique> Rayon de coin: 10px
Style de calque> Stroke:
1 à l'extérieur # e4e4e4 Style de calque> Superposition de dégradé:
# e5e5e5 #ffffff Linéaire Style de calque> Ombre portée:
Ordinaire # c1c1c1 100% 90 3 4 Vous devriez maintenant avoir:
Créez un autre rectangle, cette fois à 130px large par 51px haut, directement au-dessus de votre barre de "fond du menu". Donnez-lui ce dégradé:
Style de calque> Superposition de dégradé:
#efefef # e4e4e4 #fcfcfc Linéaire Ajoutez maintenant un texte de substitution: tapez le mot "Page" et placez-le au milieu de vos éléments de menu avec les paramètres suivants:
Caractère> Police: Roboto, régulier
Caractère> Taille de la police: 18px
Caractère> Couleur: # 5c5c5c
Style de calque> Ombre portée:
Ordinaire #ffffff 100% 90 1 0 Votre élément de menu devrait ressembler à ceci:
Faites une copie du rectangle et du texte de votre élément de menu, puis déplacez-le vers la droite afin qu’il se trouve juste à côté de votre original. Modifier le texte pour lire "Actuel".
Définissez les propriétés de style de calque du rectangle sur:
Style de calque> Stroke:
1 à l'extérieur # e62d4ee4e4e4 Style de calque> Inner Shadow:
Ordinaire # faabb9 60% 90 3 5 Style de calque> Superposition de dégradé:
# ef3d5d # dc2345 # fc6c86 Linéaire Style de calque> Ombre portée:
Ordinaire # cc2241 100% 90 1 0 Modifiez ensuite les paramètres de couleur et d’ombre portée de votre texte comme suit:
Caractère> Couleur: #ffffff
Style de calque> Ombre portée:
Ordinaire # b50020 100% 90 1 0 Lorsque vous avez terminé avec ce qui précède, reproduisez davantage "l'élément de menu" d'origine et placez-les à droite de "l'élément de menu actuel". Nous faisons cela pour voir à quoi ressemblent les styles d’éléments de menu lorsque vous êtes assis les uns contre les autres, afin d’assurer une séparation visuelle adéquate d’un élément à l’autre..
Malheureusement, Photoshop ne dispose d'aucun moyen de définir un paramètre du type "bordure gauche". Nous ne pouvons donc pas définir de bordure gauche ou droite directement sur les rectangles des éléments de menu. Cependant, nous devons encore simuler l’effet pour pouvoir séparer chaque élément. Utilisez l'outil de ligne de Photoshop pour en dessiner 1px larges lignes verticales entre les éléments de menu et définissez leur couleur de remplissage sur #dddddd
Avec tous ces éléments en place, vous devriez avoir:
Si vous utilisiez cette présentation pour un client, il s'agit du domaine dans lequel vous ajouteriez son principal intérêt ou appel à l'action. Pour les besoins de ce didacticiel, ajoutez les quatre lignes suivantes, toutes centrées sur la page:
Définissez les paramètres suivants sur la première et la troisième lignes:
Caractère> Police: Roboto, mince
Caractère> Taille de la police: 48px
Caractère> Couleur: # 6b6b6b
Puis, donnez les deuxième et quatrième lignes ces paramètres:
Caractère> Police: Roboto, Bold
Caractère> Taille de la police: 80px
Caractère> Couleur: # ef3d5d
Votre texte devrait maintenant ressembler à ceci:
Sous le texte principal, créez un rectangle aux coins arrondis. 1200px large par 665px haute. Donnez-lui ces paramètres:
La couleur de remplissage: #ffffff
Propriétés> Propriétés de la forme dynamique> Rayon de coin: 15px
Style de calque> Stroke:
1 à l'intérieur # d8d8d8 Style de calque> Ombre portée:
Ordinaire # c1c1c1 27% 90 3 4 ensuite, 60px sous le haut de l’arrière-plan du panneau, créez un autre rectangle à coins arrondis. CA devrait etre 1230px large et 70px haute. Centrez-le sur la toile pour qu'il dépasse par 15px de chaque côté de l'arrière-plan du panneau. Donnez-lui ces propriétés:
La couleur de remplissage: # ef3d5d
Propriétés> Propriétés de la forme dynamique> Rayon de coin: 10px
Style de calque> Inner Shadow:
Ordinaire # de2a4a 60% 90 0 5 Style de calque> Superposition de dégradé:
# ef2c4f # dc2345 # fc6c86 Linéaire Style de calque> Ombre portée:
Ordinaire # cc2241 100% 90 3 0 Nous avons déjà une ombre portée sur le rectangle que nous venons de créer, ce qui lui donnera un effet 3D subtil. Mais nous voulons aussi avoir une deuxième ombre portée qui ressemblera à une ombre réelle projetée par un downlight. Comme nous avons déjà "utilisé" la propriété ombre portée du rectangle existant, nous devrons créer un deuxième rectangle auquel appliquer une deuxième ombre..
Dupliquez le rectangle d’arrière-plan de votre panneau et faites-le glisser sous l’original dans le panneau des couches, puis effacez son style de couche existant. Nommez-le "panelheadershadow" pour pouvoir distinguer facilement les deux couches. Donnez-lui ces paramètres d'ombre portée:
Style de calque> Ombre portée:
Ordinaire # 000000 27% 90 5 3 Directement au milieu de l'arrière-plan de l'en-tête du panneau, tapez "IN THIS TUTORIAL:" et définissez les paramètres suivants pour le texte:
Caractère> Police: Roboto, régulier
Caractère> Taille de la police: 24px
Caractère> Couleur: #ffffff
Style de calque> Ombre portée:
Ordinaire # b50020 100% 90 1 0 Enfin, ajoutez ces lignes de texte:
Définissez le premier lot de texte sur:
Caractère> Police: Roboto, mince
Caractère> Taille de la police: 36px
Caractère> Couleur: # 6b6b6b
Et le deuxième lot de texte à:
Caractère> Police: Roboto, noir
Caractère> Taille de la police: 48px
Caractère> Couleur: # 6b6b6b
Puis mettez en surbrillance chacun des symboles "+" et définissez leur couleur sur: # ef3d5d
Vous devriez maintenant avoir un panneau d'information qui ressemble à ceci:
C’est là que nous allons commencer à utiliser Font Awesome. Nous allons placer l'icône "fa-down-arrow" et l'utiliser au lieu d'une image.
Pour ce faire, le moyen le plus simple consiste à insérer la "lettre" appropriée dans votre mémoire cache en vous rendant sur la feuille de calcul de Font Awesome. Localisez l’icône "fa-down-arrow", mettez en surbrillance le petit aperçu de l’image et appuyez sur CTRL / CMD + C
Mettez en surbrillance et copiez la petite flèche vers le basRetournez sur votre toile, placez un curseur avec l'outil Texte et collez le caractère que vous venez de copier. Au début, vous verrez juste un drôle de petit rectangle avec une croix, alors changez vos paramètres comme suit:
Caractère> Police: FontAwesome
Caractère> Taille de la police: 200px
Caractère> Couleur: # 6b6b6b
Assurez-vous que la flèche est centrée sur la toile et réglez l'opacité du calque sur 30%. Vous devriez maintenant avoir cette jolie flèche:
Créer un nouveau rectangle d'angle arrondi, 420px large par 105px haute. Le bouton utilisera exactement les mêmes propriétés de style de calque que "l'arrière-plan de l'en-tête du panneau" afin que vous puissiez simplement copier ces styles de calque. Cliquez avec le bouton droit sur le calque de l'arrière-plan de l'en-tête de votre panneau et sélectionnez "Copier le style du calque", puis cliquez avec le bouton droit sur le nouveau calque de boutons et sélectionnez "Coller le style du calque"..
Comme nous l'avons fait avec l'arrière-plan de l'en-tête du panneau, nous voulons créer un deuxième rectangle pour ce bouton auquel une deuxième ombre portée peut être appliquée. Dupliquez votre calque de bouton et faites-le glisser sous l'original dans la palette des calques, puis renommez-le "ombre de bouton". Copiez le style de calque à partir du calque "panelheadershadow" créé précédemment et collez-le dans votre nouvelle "ombre de boutons"." couche.
Nous allons ajouter un petit cercle au bouton qui ressemblera à une petite dépression, puis nous placerons une flèche blanche pointant vers la droite..
Créez un cercle (ellipse) au-dessus du bouton à 47px par 47px. Positionnez-le de manière à ce qu'il soit à égale distance des bords supérieur, gauche et inférieur de l'arrière-plan du bouton, puis attribuez-lui cette incrustation en dégradé:
Style de calque> Superposition de dégradé:
# f04f6c # e32d4f Linéaire Pour créer la flèche pointant vers la droite, nous allons à nouveau utiliser FontAwesome. Retournez à la feuille de triche et copiez cette fois le fa-caret-right icône. Sur votre toile, utilisez l’outil de texte pour placer un curseur sur le cercle que vous venez de créer et collez-la dans l’icône / le personnage de Font Awesome. Donnez-lui ces propriétés:
Caractère> Police: FontAwesome
Caractère> Taille de la police: 36px
Caractère> Couleur: #ffffff
Positionnez la flèche blanche nouvellement créée au centre du cercle situé au-dessus.
En haut du bouton, à droite du cercle et de la flèche, tapez "Démarrer le didacticiel" et définissez les paramètres suivants pour le texte:
Caractère> Police: Roboto, régulier
Caractère> Taille de la police: 36px
Caractère> Couleur: #ffffff
Ce texte utilise la même ombre portée que le "texte d'en-tête du panneau", vous pouvez donc copier le style de ce texte et le coller sur ce calque..
Vous devriez maintenant avoir un bouton qui ressemble à ceci:
Nous allons maintenant ajouter le dernier élément de la conception, des découpes en bas pour finir de cadrer l'espace. Lorsque cet élément est codé, nous utilisons des paramètres de bordure supérieure et inférieure distincts, mais comme Photoshop ne peut pas faciliter cela, nous utilisons à nouveau des outils de forme afin d'obtenir les bonnes couleurs en place..
Sous le bouton de démarrage, créez un rectangle avec une couleur de remplissage de #dddddd C'est 5px haut et s'étend sur toute la largeur de la page. Dupliquez le nouveau rectangle et déplacez-le vers le bas 10px donc il y a un 5px écart entre les deux rectangles.
Au centre de votre toile et au-dessus des deux lignes grises / rectangles, tracez un cercle 40px par 40px et lui donner ces propriétés:
La couleur de remplissage: # f2f2f2
Style de calque> Stroke:
5 à l'intérieur #dddddd Style de calque> Superposition de dégradé:
#dddddd # f2f2f2 Radial Portez une attention particulière aux paramètres de superposition de dégradé, car ils sont différents de ceux que nous avons utilisés auparavant. Les arrêts de couleur sont placés à 40% et 45% plutôt qu'à 0% et 100%, et nous utilisons un dégradé radial au lieu de linéaire. Avec la bordure / trait, cela donne l’effet d’un petit cercle gris entouré d’un plus grand.
Votre garniture inférieure devrait ressembler à ceci:
Vous devez maintenant avoir une conception PSD terminée, prête à être traduite à 100% en code pur CSS3 et Base64:
Dans la partie suivante de ce tutoriel:
à plus!
