Share
Les bonnes conceptions ne doivent jamais être gaspillées. Cette conception a été conçue à l’origine pour un client qui ne payait jamais, et comme il y avait eu des retours extrêmement positifs, j’ai décidé de créer un tutoriel. Les textures riches et crémeuses donnent à cette conception un thème unique. J'espère que tu aimes le café!
Non seulement nous distribuons les fichiers Photoshop pour cette conception, mais également les fichiers HTML afin que vous puissiez voir comment il a été codé après la phase de conception! Vous devriez suivre ce didacticiel dès le début, mais n'hésitez pas à récupérer également les fichiers source.
Comme pour toute conception, nous avons besoin d'une bonne grille pour commencer. Je commence toujours par un document de 960 pixels de large (qui sera la largeur de notre page). Assurez-vous de donner à votre document une hauteur suffisante pour prendre en compte tous les éléments que nous allons créer. J'ai choisi 1100 pixels..
Faites glisser les repères sur les côtés de votre document. Ceux-ci agiront comme des gouttières pour notre zone de conception, qui aura une largeur de 960px. Faites également glisser les repères à 10px et 960px sur l'horizontale. Celles-ci serviront d'identifiant pour que tout reste en place au fur et à mesure que nous avançons dans la page..
Une fois que vous avez défini vos directives, allez à Image -> Taille du canevas et changez la valeur de la largeur de votre canevas en 1000px. Cela nous donnera un peu d’espace supplémentaire pour travailler à l’extérieur et montrera comment le site se développera dans le navigateur..
Le coin supérieur gauche de votre document devrait ressembler à ceci:
Nous devons créer quelques lignes directrices supplémentaires, car nous avons quelques colonnes verticales sur la page. Créez 6 autres repères verticaux à 330px, 350px, 650px, 670px, 730px et 750px. Cela devrait nous aider à aller de l'avant et à tout aligner.
Ensuite, nous allons remplir le fond. Nous visons évidemment le marron à cause de sa richesse (et sa couleur de café). Commencez par créer un nouveau calque et remplissez le document entier avec n'importe quelle couleur unie (nous allons le modifier avec les styles de calque). Vous pouvez le faire rapidement en appuyant sur Maj + F5 pour "Remplir".
Renommez ce calque "bg", cliquez dessus avec le bouton droit de la souris et sélectionnez "Options de fusion". Sélectionnez "Superposition de dégradé" et créez un dégradé de # 67331c à # 2e1308; nous voulons le marron foncé en haut de la page et le marron clair en bas.
Nous devons maintenant ajouter un peu de texture pour que le dégradé ne soit pas aussi plat. Créez un nouveau calque au-dessus de votre calque "bg" et nommez ce calque "Motif"..
Le résultat devrait ressembler à ceci:
Maintenant que notre arrière-plan est créé, nous allons commencer par créer certains des éléments de la page - en commençant par cette barre de navigation de couleur jaune..
Créez un nouveau groupe de couches et renommez ce groupe "Navigation". Dans le groupe "Navigation", créez une sélection de 100 pixels de haut et toute la largeur de votre document. Créez un nouveau calque et appuyez sur Maj + F5 pour le remplir. Comme couleur de remplissage, utilisez # edd38d (yellow). Renommez cette couche "bg" dans le groupe "Navigation".
Vous avez maintenant votre barre de navigation. Il semble un peu plat, nous allons donc y ajouter quelques styles de calque pour le faire ressortir un peu plus. Cliquez avec le bouton droit sur le calque "bg" et sélectionnez Options de fusion..
La barre de "navigation" devrait ressembler à ceci:
Encore une fois, il nous faut une texture - sinon, le résultat sera plat. J'ai utilisé cette texture de sable qui traînait. La partie importante ici est la couleur. Vous pouvez utiliser n'importe quelle texture, mais la couleur doit être similaire à la couleur de remplissage que nous avons utilisée précédemment. Ajoutez cette texture dans un nouveau calque au-dessus du calque "bg" créé précédemment et définissez son opacité sur 30%. Renommez cette texture de calque et assurez-vous qu'elle a exactement les mêmes dimensions que le calque "bg"..
Nous voulons donner un peu plus de profondeur à la barre jaune, nous allons donc créer manuellement une ombre plus sombre sur le bord inférieur. Pour ce faire, faites une sélection en bas de la barre jaune et créez un nouveau calque.
Remplissez ce nouveau calque avec un dégradé (Maj + F5) de Transparent à # 2f1408 (à 30% d'opacité)
Cela devrait le faire pour la barre jaune. Ça devrait ressembler a quelque chose comme ca:
Créez un nouveau groupe nommé "Nav" et créez tout le texte et les calques suivants..
Navigation assez simple ici, grande et facile à lire. La police est Georgia, 30px. Assurez-vous que votre texte a un bon espacement entre chaque mot (pour permettre les états actifs possibles). Rendre la couleur du texte # 92583f, avec l'élément actif (Home dans ce cas), # 64311b.
Pour créer le soulignement "actif" pour la navigation, j'ai utilisé l'outil Pinceau pour souligner un soulignement quelque peu intitulé. Cela lie le logo avec le reste du site. Ne vous inquiétez pas si vous ne réussissez pas du premier coup - je l'ai probablement dessiné 50 fois avant de trouver la ligne qui me plaisait.
Nous avons maintenant besoin du bouton "Inscription". Dupliquez le texte de navigation (sélectionnez le calque de texte et Commande + J) et changez les mots pour lire "Inscription".
Ensuite, sélectionnez l'outil Rectangle arrondi et tracez un rectangle avec un rayon de 20px; Cela nous donnera la forme autour du texte d'inscription.
Définissez le remplissage de ce calque sur 0% et appliquez les styles de calque suivants:
Pour créer le logo, j'ai trouvé une serviette en stock gratuite et coupé un peu les bords. Vous pouvez trouver le vôtre sur: iStockPhoto ou d'autres sites gratuits.
J'ai ajouté une ombre portée pour faire croire que la serviette était posée au-dessus de tout le reste:
J'ai utilisé une texture de base d'une tache de café (pour donner un peu plus d'authenticité à notre site de café et à notre serviette de table). Vous devrez peut-être bricoler l'opacité jusqu'à ce que tout se passe bien. Vous pouvez également essayer de régler le mode de fusion de la tache sur Multiplier pour la faire ressortir un peu plus..
Pour le reste du logo, j'ai choisi une police d'écriture manuscrite et ai rapidement dessiné une tasse de café. Rien de trop délicat ici.
Nous allons maintenant créer ce champ de recherche translucide. Créez un nouveau groupe de couches, sous les couches "Barre jaune" (car nous souhaitons que la barre de recherche apparaisse comme un onglet placé au-dessous de l'en-tête). Votre pile de couches devrait être quelque chose comme ceci:
Nous allons commencer par créer le rectangle arrondi contenant la barre de recherche. Saisissez l'outil Rectangle arrondi et créez un rectangle de 300 pixels de large et environ 70 pixels de haut. Assurez-vous que le rectangle correspond bien à notre "gouttière de colonne droite" avec les guides que nous avons créés à la première étape de ce didacticiel..
Le résultat devrait ressembler à ceci:
Nous allons ensuite créer la zone de saisie avec l'outil Rectangle arrondi. Créez un rectangle avec un rayon de 5 pixels, une largeur de 280 pixels, une hauteur de 30 pixels. Centrez ce nouveau rectangle dans le rectangle "conteneur" que vous avez précédemment créé. Renommez cette couche "entrée"
Saisissez l'outil de texte et ajoutez du texte avec # af8753 comme couleur. Choisissez votre icône stock préférée (je recommande d'utiliser IconFinder pour les icônes).
Maintenant que l’en-tête est créé dans son intégralité, nous pouvons maintenant entrer dans le contenu réel. Nous allons d'abord créer ces 3 principaux compartiments de contenu. Encore une fois, saisissez l'outil Rectangle arrondi avec un rayon de 20px et créez 3 rectangles arrondis dans les 3 colonnes que nous avions créées précédemment..
Pour que ces zones ressemblent à ce que je viens de montrer dans la capture d'écran, appliquez les styles de calque suivants:
J'ai trouvé sur le Web des icônes de café très bien adaptées au design que j'ai utilisées sur ces 3 sections. Encore une fois, nous utilisons simplement nos ressources - et il est inutile de recréer la roue ici.
J'ai ensuite ajouté un en-tête, en utilisant la même police Georgia, et du texte à puces, et cette section est terminée..
Étant donné que la conception utilise la transparence tout au long de la conception, j’ai pensé que les styles de table ne devraient pas être différents. La table est propre et simple, ce qui l’aide à s’intégrer parfaitement au design.
Saisissez l'outil de sélection et créez une sélection carrée où vous souhaitez placer votre table. Mon tableau mesure 700 pixels de large (en suivant les indications que nous avons définies précédemment) et mesure 220 pixels de haut..
Créez un nouveau calque et remplissez ce calque (Maj + F5) d’un brun plus foncé (j’ai choisi # 3c2014). Renommez ce calque en "table bg" et réglez l'opacité sur 70%. Maintenant, en utilisant l'outil de sélection d'une seule ligne, nous allons créer la séparation entre les colonnes et les lignes. Une fois que vous avez sélectionné l'emplacement de vos divisions, appuyez sur Supprimer et supprimez les pixels remplis du calque "tableau bg"..
Vous devriez maintenant avoir une belle grille de table comme ceci:
J'utilise Georgia pour remplir les cellules avec du texte et je vous laisse le soin de choisir les couleurs / tailles. Assurez-vous d'ajouter l'en-tête principal et les en-têtes de tableau.
Nous allons maintenant créer les icônes de classement. Pour les évaluations "prix", j'ai choisi une police avec un signe dollar épais et lui ai appliqué des styles de calque. Lorsque vous trouvez votre police, tapez 4 signes dollar. Dupliquez ce calque, puis déplacez-le à droite et tapez 1 signe dollar (des styles de calque distincts leur seront appliqués). Pour les signes en dollars jaunes "actifs", nous appliquerons les styles de calque suivants:
Et pour les signes dollar inactifs, nous voulons qu’ils aient l’air inséré (comme s’ils ne sont pas remplis). Nous allons appliquer différents styles de calque ici:
Pour le classement par étoiles, j'ai utilisé l'outil Photoshop Custom Shape et choisi l'étoile. Même technique que celle utilisée pour les signes dollar (il suffit de copier / coller les styles de calque depuis le haut) vers ces étoiles..
Votre résultat devrait être dans ces lignes:
Regroupez cette ligne que vous avez créée et dupliquez le groupe deux fois, en déplaçant la ligne vers le bas pour l'adapter à la grille créée précédemment. Le résultat final devrait ressembler à ceci:
Notre dernière section principale est la liste des utilisateurs les plus actifs. Nous continuons à utiliser la Géorgie, mais nous apportons une petite touche agréable aux utilisateurs ne disposant pas d'avatars. Vous verrez que le motif provient en réalité de l'icône dans la boîte "Parcourir" située près du sommet - la vapeur provenant de la tasse. Un autre détail pour lier le designer. Voici comment vous le créez.
Dans notre gouttière de colonne de droite, ajoutez le titre (réutilisez ce que vous avez créé pour "Commentaires récents") et remplissez une zone rectangulaire avec une opacité de 40% (la couleur n'a pas d'importance ici). Nommez ce calque "conteneur", puis nous y ajouterons quelques styles de calque (superposition de couleurs et traits):
Le résultat devrait être une boîte opaque avec une jolie bordure extérieure plus sombre que l'arrière-plan intérieur:
Pour l’avatar, utilisez l’outil Marque pour créer une sélection de 50px par 50px. Créez un nouveau calque et remplissez votre sélection avec n’importe quelle couleur (Maj + F5).
Nous allons maintenant ajouter quelques styles de calques pour que cet avatar soit un peu meilleur pour les utilisateurs ne disposant pas d'un ensemble d'avatars..
Ajoutez du texte pour le nom de l'utilisateur et le pays, et la vapeur tourbillonne dans la tasse à café, et dupliquez la ligne plusieurs fois pour remplir l'espace.
Enfin, le pied de page. Pour créer un peu de séparation, il existe un dégradé brun foncé à transparent du haut vers le bas afin de créer une ligne visuelle séparant les deux sections. Pour créer cette séparation, utilisez l'outil de sélection pour faire une sélection et remplissez la sélection avec un dégradé (marron à transparent). Ajustez l'opacité du dégradé jusqu'à ce que vous puissiez voir les motifs de l'arrière-plan briller.
Encore une fois, nous allons utiliser Georgia pour créer des liens supplémentaires sur le site. J'ai utilisé 18px pour les liens et 14px pour la notification de copyright ci-dessous. Assurez-vous que le côté gauche est aligné avec les directives que nous avons créées précédemment.
La touche finale est de réutiliser l'icône de tasse de café de la case "Parcourir" en haut à droite. encore une fois aligner le côté droit avec les lignes directrices.
Pas si difficile non? C'est assez simple lorsque vous pouvez le décomposer, en réutilisant certains des styles et techniques que vous avez utilisés maintes et maintes fois. Les fichiers découpés en tranches sont également inclus, vous pouvez donc voir comment cela a été codé. Beaucoup de choses ont changé depuis que j'ai conçu et codé cela, et beaucoup d'images pourraient probablement être recréées avec CSS3 et des dégradés, mais il y a presque 3 ans, c'est comme ça que je l'avais fait. Vous avez peut-être vu cette création sur www.coffeenatic.com; Maintenant que le site a disparu, j'ai pensé que ce serait une bonne idée de le partager avec tout le monde car j'ai reçu de tels retours positifs. J'espère que vous en avez profité!
Accentsconagua