Share
Je suis un grand fan des conceptions de sites photo-centriques? Aujourd'hui, je suis ravi de lancer un nouveau didacticiel "Site complet" destiné aux photographes, illustrateurs et autres créatifs visuels. Lors de la première journée, je vais concevoir le modèle dans Photoshop à l'aide de techniques et astuces spécifiques. Au jour 2, nous allons passer à la préparation "pré-vol" de la phase de codage, que nous détaillerons au jour 3. Au jour 4, nous vous montrerons comment créer trois sites complètement différents en utilisant le même HTML brut. Prêt à commencer? Faisons cela!
Comme pour tout projet de conception Web, il est important d'identifier les objectifs de tout projet. Alors, avant de plonger, disons quelques mots sur nos objectifs éventuels:
La dernière chose que je mentionnerai est peut-être la plus importante: elle doit être 100% personnalisable en utilisant le moins de travail possible! Qu'est ce que cela veut dire pour nous? J'aimerais que tout le monde soit en mesure de changer de marque et de re-skinner toute la mise en page sans avoir à toucher au désordre avec la réécriture du code HTML de base. Cela signifie idéalement qu'en échangeant quelques images (le logo et une image d'arrière-plan personnalisée) et du code CSS, un résultat totalement différent peut être créé? c'est pourquoi le dernier jour de cette série, nous allons consacrer toute la session à la création de personnalisations.!
Ok, avec nos objectifs maintenant clairement définis, commençons!
Le didacticiel vidéo est destiné à accompagner le tutoriel écrit ci-dessous. Pensez-y comme du matériel "supplémentaire" - je ne couvrirai pas tout le contenu de la partie écrite, mais il est parfois agréable de voir quelqu'un d'autre travailler dans Photoshop pour saisir d'autres astuces, astuces d'efficacité et autres techniques que vous ne pourriez peut-être pas autrement être familier avec.
Le guide complet écrit, étape par étape, est présenté ci-dessous. Nous allons commencer avec un document Photoshop vierge, mais vous pouvez également télécharger le fichier PSD de démonstration pour vérifier votre travail par rapport au mien..
Commencez par créer un nouveau document de 1280 x 800 pixels. Pourquoi? Parce que cela nous donnera une belle et grande toile à jouer. La largeur de notre design final ne sera pas réellement de 1280px, mais nous voulons voir une couleur de fond juste comme nous le verrions normalement dans une grande fenêtre de navigateur..
Le premier dilemme pratique de tout projet Web consiste à décider de la taille du document sur lequel vous allez travailler. Dans notre cas, j'aimerais que la conception soit centrée sur l'écran, remplisse le plus d'espace possible sur un moniteur plus petit - et ne semble pas trop petite sur un moniteur de grande taille..
Considérations sur la largeur: Je choisis d'utiliser 994px comme la largeur totale. Ce numéro est quelque peu arbitraire - il aurait pu être plus large de quelques px ou plus petit de quelques px, mais finalement, cela fera l'affaire. Pourquoi? Parce qu'il s'inscrit dans la "zone de sécurité" 1003px des navigateurs les plus utilisés, avec un peu de rembourrage de chaque côté pour plus de sécurité.
Considérations de hauteur: Je vais travailler à la hauteur de 644px dans Photoshop La hauteur est un autre nombre arbitraire dans le cas de cette conception. Pourquoi? Parce que 1) ça va être ajustable à partir du CSS, 2) on va laisser ce "flex" s'adapter au contenu que l'on jette à l'intérieur et 3) je suis moins préoccupé par la hauteur du pli que par un projet à plus grande échelle.
L'essentiel à noter ici est que tout cela sera réglable à 100% à partir du CSS une fois que nous aurons terminé. Donc, si vous préférez une disposition plus large avec une hauteur plus basse, vous pourrez obtenir ceci en quelques secondes à partir de votre choix. L'idée ici est de garder les choses fluides même si nous utilisons un modèle de taille fixe? alors ne soyez pas trop accroché sur les chiffres précis en ce moment.
Caveat: Cette approche "Keep It Fluid" est en réalité unique à ce modèle particulier? Je commence généralement tout projet avec une analyse beaucoup plus raffinée pour trouver la taille parfaite, que nous examinerons dans d'autres séries.
Bien que l’utilisation d’un système de grille prédéfini (960 ou 978 g, par exemple) présente de nombreux avantages, j’ai une vision assez claire de ce que je veux construire, et que je ne trouve pas un système de grille qui convienne immédiatement à ma conception. 'ai opté pour le style libre.
Quelles sont les répercussions du freestyling sur un layout? D'une part, nous devrons faire plus attention aux dimensions de chaque module de contenu que nous créons, car nous n'aurons pas de guides nous indiquant où les choses doivent aller. Pour créer un modèle qui ressemble vraiment à un modèle, nous devrons faire preuve de beaucoup plus de diligence pour créer notre propre système de grille qui est natif de ce modèle..
Dessinez le rectangle arrondi: Maintenant que nous avons décidé 994px par 644px comme taille de notre conteneur, allez-y et dessinez un rectangle arrondi de cette taille (en utilisant un Rayon 12px). Ouvrez le panneau d'information (Fenêtre> Info ou F8) pour afficher la taille de votre rectangle au fur et à mesure que vous le dessinez.
Notez que la couleur du rectangle n'a pas d'importance à ce stade. Bien que nous finissions par le rendre blanc, pour le moment nous voulons le voir ressortir de l'arrière-plan.
Création de l'effet d'ombre: Je vais utiliser la même méthode que celle utilisée dans le didacticiel "Créer votre propre curseur à onglets juteux", car il s'agit du moyen le plus simple d'obtenir une ombre qu'il sera facile de découper et de transformer en un fichier PNG transparent au moment de coder..
Pour créer cette ombre, il suffit de saisir votre outil pinceau et de le définir sur 60px en taille et 0% de dureté..
ensuite, créer un nouveau calque vide dessiner, maintenez la Décalage touche pour dessiner une ligne droite, et faites simplement glisser votre curseur sur environ la moitié du rectangle de conteneur.
Enfin, nous allons utiliser le Transformation libre outil (Ctrl + T) pour l'incliner très légèrement pour créer un effet d'arc (j'ai utilisé environ 2,5 pour l'angle). Pourquoi incliner cela du tout? Parce que cela aidera à créer un peu de dimension supplémentaire si la source de lumière semble se plier un peu.
Maintenant, dupliquons ce calque brossé (Ctrl + J tout en étant sélectionné sur le calque) et retournez-le horizontalement (Édition> Transformer> Retourner horizontalement). Faites glisser le nouveau calque de pinceau retourné jusqu'à ce qu'il corresponde à peu près à l'autre côté du rectangle du conteneur. Le résultat devrait être une ombre à l'opposé de la première.
Déplacez les deux calques d'ombre derrière le? Frame? calque et redimensionne les calques (sélectionne les deux calques et appuie sur Ctrl + T) de manière à ce qu'ils tiennent juste dans la largeur totale du rectangle du cadre.
Enfin, fusionnez les deux couches d’ombre (Ctrl + E) et déplacez le calque d'ombre au bon endroit (utilisez l'outil de sélection de base [V] et utilisez le clavier pour le pousser). Vous pouvez également ajuster l'opacité du calque d'ombre en fonction de vos préférences personnelles. J'ai utilisé à propos de 60%, vous pouvez faire plus ou moins selon ce que vous recherchez.
Étape bonus: Pour ajouter encore plus de profondeur, utilisez le Transformation de perspective sur l'ombre pour faire croire qu'il retourne dans l'espace. Il suffit d'appliquer un petit Flou gaussien sur le calque une fois que vous l'avez transformé pour supprimer tous les artefacts de pixels.
Encore une étape supplémentaire si vous recherchez encore plus de drame: essayez de créer un calque d’ombre dupliqué 70% plus petit (utilisez la transformation libre et la mise à l’échelle en pourcentage pour l’ajuster), plus estompé et avec une opacité différente (70 %) pour créer une "ombre principale" à l'intérieur de la principale.
Nommez vos couches d’ombre (une fois que vous avez fini de les jouer) et placez-les dans un nouveau dossier de couche appelé Ombres. L'organisation facilitera grandement la personnalisation lorsque nous serons prêts à découper tout cela en morceaux!
Créer le fond:
Le fond que nous allons créer est un subtil "motif de bruit" bleu clair. Je vais y revenir rapidement, mais pour en savoir plus sur la création de ces motifs, consultez notre didacticiel complet ici..
Commencez par créer un nouveau calque vierge et le remplir avec blanc (Maj + F5).
Ajoutons maintenant du bruit en utilisant Filtre> Bruit> Ajouter du bruit. Vous pouvez ajuster cela à vos propres préférences, mais j'ai utilisé 14% pour le montant.
Définissez le nouveau "calque de bruit" sur Multiple dans le panneau du mode de fusion et tracez un rectangle (couleur de remplissage). # e1ebef) derrière cette couche.
Enfin, ajoutons un nouveau calque de réglage (Couche> Nouvelle couche de réglage> Teinte / Saturation) sur ces deux autres couches pour que notre bruit ne soit pas ennuyeux vieux gris.
Sous le panneau de réglage de notre calque de réglage (Fenêtre> Réglages), J’ai utilisé les paramètres de (Teinte: 200, sam: 100 et légèreté: +60) avec la case à colorier cochée. Vous pouvez jouer jusqu'à ce que vous obteniez l'effet que vous souhaitez.
Allez-y et placez ces trois nouveaux calques (le calque adj., Le calque de bruit et le calque de couleur d’arrière-plan) dans un nouveau dossier de couche appelé "Couleurs de fond".
Enfin, allons de l'avant et rendons la couleur de notre boîte à conteneurs blanche, maintenant que nous avons ajouté une couleur de fond. J'ai aussi ajouté une lumière Accident vasculaire cérébral 1px autour de notre boîte de conteneur (# d8d8d8 en couleur) pour l'aider à se démarquer de l'arrière-plan.
À ce stade, votre document devrait ressembler à ceci:
Vos couches doivent également être organisées comme suit:
Maintenant que notre conteneur de contenu de base est créé et mis en forme, il est temps de commencer à le remplir avec du contenu. Nous allons commencer par la barre latérale de navigation, car cela va définir plus tard combien d'espace nous avons pour le contenu..
Quelle devrait être sa largeur?? La largeur de la barre latérale est vraiment à vous? J'ai choisi d'utiliser 235px comme largeur, car elle peut plus ou moins contenir les éléments que je souhaite (quantité de place pour les titres de page longue, le widget de média social et une barre de recherche). Vous pouvez ajuster cela pour répondre à vos propres besoins cependant? et comme je le dis depuis le début, tout cela sera réglable ultérieurement du CSS.
Pour commencer, dessinez simplement une ligne 1px en utilisant la même couleur que celle utilisée pour la bordure de notre conteneur (# d8d8d8) le long de l'axe vertical du conteneur. Placez-le environ 285px de la gauche du bord.
Ensuite, il peut être utile de tracer une ligne directrice à ce stade - à environ 20 pixels du bord de la bordure du conteneur. Nous nous en servirons comme guide pour placer tout notre contenu de manière à ce que tout soit uniforme et bien aligné..
Je ne vais pas trop entrer dans les détails parce que, bon, vous allez probablement utiliser votre propre logo;). En bref, j’ai commencé avec une simple icône de cadre (à partir du jeu d’icônes Noble) et a ajouté ma propre photo au cadre. Ensuite, j'ai utilisé la police Museo à 26 points; En utilisant 2 poids et couleurs différentes pour créer une variété visuelle, je mets le titre de notre modèle, "ShutterPress" joliment à côté de l'icône..
Encore une fois, vous voudrez probablement utiliser votre propre logo (ou celui d'un client) à ce stade? donc je vais passer sur les styles de calque et autres réglages. N'hésitez pas à les vérifier à l'intérieur de la démo PSD si!
Il suffit de placer le logo dans la barre latérale. Notez que nous utilisons à peu près la même quantité de remplissage supérieur et supérieur droit que nous avons utilisé pour le remplissage du côté gauche..
Les petits trucs comme garder l’espace autour d’un objet aussi important que l’uniforme du logo font partie des choses qui feront la différence entre un bon design et un superbe design..
La navigation en accordéon est le premier élément fonctionnel que nous allons nous moquer. À ce titre, il convient de noter que nous allons entrer ici dans une zone grise. Nous voulons simuler cela comme s'il était utilisé? principalement pour que si nous montrons cela à quelqu'un (comme un développeur), il comprendra à quoi cela devrait ressembler dans tous les états interactifs possibles.
En tant que tel, nous voulons montrer une lien actif, ainsi qu'au moins un accordéon ouvert et une accordéon fermé.
Je vais utiliser une police simple pour cette - Lucida Sans à 12 pt avec le premier ensemble à 36 pt avec la couleur noir # 252525. Je préfère utiliser le Tranchant paramètre anti-alias pour les polices Web dans les maquettes Photoshop, mais vous pouvez utiliser ce que vous voulez.
J'utilise aussi une petite variante pour le lien actif: Audacieux avec la couleur définie à # 0285da, ce qui arrive à imiter le logo ainsi que la teinte de fond.
Utilisez quelques espaces de clavier simples pour indenter les liens qui deviendront nos liens imbriqués en accordéon.
Notez que nous utilisons cette même directive verticale pour accrocher le texte afin qu’il s’aligne bien avec le logo..
Les 36 points d’avance sont suffisants pour définir une simple ligne horizontale entre chaque lien, alors allons-y et faisons-le à ce stade. Utilisez la couleur #EAEAEA pour ces lignes horizontales, qui est légèrement plus claire que notre couleur de bordure principale. Pourquoi? Ça va aider à établir que ces règles sont légèrement moins fixes que les autres.
Ajoutons maintenant les boutons d'accordéon. Commencez par créer un rectangle arrondi de rayon 2px mesurant 11px par 11px. Ajoutez les styles de calque suivants:
Un dégradé gris clair (# E6E6E6 au blanc) de bas en haut, respectivement.
UNE 1px coups extérieurs de #bfbfbf.
Dupliquez ce calque de boutons et ajoutez un simple texte "+" et "-" pour finaliser les boutons. Placez-les comme indiqué:
À partir de maintenant, nous utiliserons les mêmes règles de style de base pour tous les nouveaux éléments. Les bordures doivent correspondre aux mêmes gris que ceux que nous avons utilisés auparavant. Le remplissage devrait également être à peu près le même que celui utilisé pour les éléments précédents. Les styles et les couleurs de police feront de même. En tant que tel, je ne vous ennuierai pas de réécrire ces notes, gardez-les simplement à l'esprit!
Pour le widget de médias sociaux, allez-y et prenez le jeu d’icônes de votre choix (ou consultez notre grand tour d’ensembles d’icônes ici). Nous allons utiliser 16px par 16px versions de n'importe quel jeu d'icônes que vous choisissez. La démo utilise cet ensemble, mais vous pouvez utiliser ce que vous voulez.
J'ai aussi choisi de désaturer les icônes sociales (Image> Réglages> Désaturer) afin qu'ils ne distraient pas le contenu principal. Ajoutez les icônes ou votre choix (espacés de quelques pixels), et ajoutez votre texte "Social:" afin qu’ils aient un titre..
Ajoutez nos bordures de lignes horizontales pour la séparation et laissez un peu d’espace en dessous pour notre barre de recherche.
Le widget de recherche est très facile à créer. Il suffit de dessiner un Rectangle arrondi de 25 pixels de haut (rayon de 8 pixels) avec un Accident vasculaire cérébral 1px de # e0e0e0 et déposez une icône en forme de loupe. J'ai utilisé celle du jeu d'icônes Fugue (c'est gratuit), mais vous pouvez utiliser les vôtres pour ajouter du style ou des reflets.
Whallah! Notre sidebar est maintenant terminé. Vous pouvez ajouter vos propres widgets personnalisés ou les laisser tels quels. Il est temps de renseigner notre zone de contenu avec du contenu!
Je vais faire les choses un peu en arrière dans les deux prochaines étapes. Normalement, vous commencez une conception Web avec la conception de la page d'accueil? la page à laquelle les gens arriveront en premier. Cependant, il s’agit d’un cas rare où la sous-page (c’est-à-dire le modèle de galerie) est sans doute plus importante que la page de destination réelle..
Donc, sachant que je peux toujours créer une conception de page d'accueil astucieuse, je vais commencer notre conception de contenu avec le modèle de galerie, car cela nous pose davantage de problèmes. Les principaux de ces problèmes sont:
La chose amusante est qu’une fois que nous avons résolu ces problèmes, nous pouvons créer la page d’accueil assez rapidement. En commençant ici, nous nous permettons de créer une galerie de vignettes époustouflante sans essayer de respecter les contraintes que nous pourrions nous imposer accidentellement en commençant par la page d'accueil..
Ok, commençons!
Je vais commencer par établir une quantité de base de remplissage que je voudrais toujours conserver dans la zone de contenu. Dans notre cas, j'ai choisi 32px pour être le montant. C'est un peu plus petit que la hauteur de ligne de la navigation, mais pas si petit que les choses se sentent serrées ou contraintes.
Cela me laisse avec une zone active d'environ 696px par 586px (encore une fois, la hauteur est flexible, donc nous ne sommes pas très inquiets à ce sujet).
Avec notre zone de contenu actif définie, nous souhaitons maintenant sélectionner la taille et le remplissage de la vignette idéaux. Comprendre ça, ce n'est pas sorcier? J'ai essentiellement joué avec plusieurs arrangements de rectangles grossièrement dessinés jusqu'à ce que je trouve quelque chose qui ressemble harmonieux.
Maintenant, je sais que le mot harmonieux n'est pas très spécifique? alors qu'est-ce que je veux dire? Sachant que je voulais tenir environ 15 à 20 images par page, j'ai essayé nos différentes combinaisons taille / espace miniatures jusqu'à ce que j'en trouve une qui reflète un bon équilibre entre espace positif et négatif ainsi qu'un sens raffiné de la hiérarchie. Des choses comme le ratio d’or jouent un rôle, mais je vais être honnête et admettre que j’ai regardé la scène dans ce cas particulier. Il n'y a pas de magie ici? juste beaucoup d'expérimentation.
Alors, quelle est la formule finale? UNE 155px large par 125px de haut vignette, définie dans 4 colonnes (et dans notre cas, 4 rangées également, qui remplissent notre hauteur).
Le rembourrage: Il y a environ 21 pixels d'espacement horizontal entre chaque vignette et environ 18 pixels d'espacement vertical.. Pourquoi la différence?
Parce que nous avons affaire à une disposition "paysage" (c'est-à-dire qu'elle est plus large que étroite), il semble juste de conserver le même rapport de forme sur l'ensemble de notre conception..
Notez que la taille finale de la vignette que j'ai sélectionnée reflète également ce rapport de paysage. Il est donc logique de laisser un peu moins de remplissage entre les lignes que nous allons placer entre les colonnes.
Voici le résultat final:
Notez que j'ai laissé environ 50 pixels d'espace en bas pour insérer une sorte de pagination (la façon dont les utilisateurs naviguent d'une page de vignettes à la suivante). Naturellement, s'il n'y a pas assez de vignettes pour déclencher la pagination, nous allons recadrer la mise en page de plus près au bas..
Le style visuel des vignettes est également important. Parce que nous prenons grand soin de créer plein de petits polonais les détails de l'ensemble de notre conception, l'affichage de vieilles vignettes d'images simples avec des bords durs semble brutal.
Nous ajouterons un style subtil pour alléger le tout et donner à notre grille de galerie un sentiment de raffinement. Appliquez le style de calque suivant à chacune de vos images miniatures:
Un 2px Inner Stroke (en termes CSS, cela deviendra rembourrage) #EAEAEA
Une ombre portée de 1px (en termes CSS, cela deviendra le frontière) # F2F2F2
Je vais zoomer à 100% ici pour vous montrer le style final:
Maintenant que nous avons établi notre grille, ajoutons de vraies images pour donner un peu de vie à cette mise en page:
Nous avons presque fini avec cette page? Désormais, tout ce dont nous avons besoin est un moyen pour les utilisateurs de naviguer d’une page de vignettes à la suivante. Ceci s'appelle la pagination. Il y a beaucoup de façons de le faire (certaines plus complexes que d'autres). Dans notre cas, nous voulons une méthode simple de pagination? donc je choisis d'utiliser une simple flèche vers la gauche | approche flèche droite - c'est-à-dire: (). C’est l’une des méthodes de pagination les plus intuitives, c’est donc logique dans notre situation..
Continuons et créons deux cercles de diamètre 18px:
Notez que j'ai simplement copié / collé le style de calque des boutons d'accordéon que nous avons utilisés auparavant. Pourquoi? Parce que la duplication de styles visuels aide à garantir l’uniformité de notre mise en page? et il n'y a vraiment aucune raison de gaspiller des efforts en essayant de concevoir un style complètement nouveau. Une utilisation cohérente du style de couche facilitera réellement la convivialité de notre site..
Une fois que vous avez dessiné vos cercles, ajoutez les flèches (ceci est déjà montré ci-dessus). Dans mon cas, j'ai utilisé une forme> personnalisée dans Photoshop, mais vous pouvez tout aussi facilement utiliser un symbole de texte personnalisé ">". Comme ce n’est pas un débutant, je suppose que vous pouvez trouver comment obtenir cette forme d’une manière ou d’une autre;)
Ailette! Cela complète réellement cette page de contenu. En utilisant les mêmes styles de base et les mêmes règles de remplissage que ceux que nous avons définis, nous pouvons facilement en faire une autre présentation (grille 2x2 ou 3x3, par exemple)..
Bon - Passons à l'étape finale de la session de conception! Nous pouvons probablement déterminer comment créer diverses autres pages d'assistance, mais ce dont nous avons vraiment besoin maintenant, c'est de la conception de la page d'accueil. Etant donné qu’il s’agit d’un modèle ciblé par les photographes, une photographie doit évidemment occuper une place centrale. Cependant, nous avons également besoin d'un texte descriptif (pour qu'un photographe explique qui il est, quels types de services il offre, etc.)
Considérations sur la largeur: Dans la plupart des cas, nous copions simplement l'espace de contenu actif que nous avons utilisé dans le modèle de galerie. Je vais changer les choses un peu en changeant le rembourrage de 32px à 20px. Pourquoi? Cela nous laissera juste un peu d’espace supplémentaire pour utiliser une image "PLEIN". C'est un changement très subtil dans la disposition générale, mais l'impact devrait être énorme car nous pourrons insérer une image massive dans l'espace..
Considérations de hauteur: Comme nous le disions depuis le début, la hauteur est vraiment variable et sera finalement laissée à chaque utilisateur / concepteur / client pour déterminer la quantité de contenu que vous souhaitez sur cette page? dans mon cas, je vais essayer de garder les dimensions de cette page identiques à celles de notre galerie.
Le résultat de ces considérations est un espace actif légèrement plus grand que celui utilisé dans le modèle de galerie: 720px par 604px.
Cela a du sens pour nous pour plusieurs raisons: 1) cela nous laisse beaucoup d’espace pour concevoir et 2) il s’intègre dans l’espace "repli" de la plupart des navigateurs populaires. Tant que nous ne placerons aucune information cruciale au bas de cette zone, nous devrions pouvoir utiliser cet espace de quelque manière que nous le pensions..
Dessin de l'image: Commencez par dessiner un 716px de large par 438px de haut rectangle arrondi (Rayon: 10px).
Appliquez les styles de calque suivants, en commençant par un 2px AVC:
Et ajoutez également une ombre intérieure (qui aidera à rendre notre image "pop" plus sur la page):
Le style visuel final devrait ressembler à ceci:
Création des onglets:
Les onglets permettront aux utilisateurs de parcourir les images de la page d'accueil. Ceci est essentiellement juste un carrousel de base de jQuery quand vous pensez en termes de codage? mais il n'y a aucune raison de nous limiter aux styles visuels que la plupart des curseurs préconfigurés utiliseront par défaut.
Alors, soyons un peu plus créatifs avec les onglets gauche / droite en créant des cercles internes intéressants visuellement.
Commencez avec un Cercle de diamètre 92px forme. Utilisation Noir pour la couleur de remplissage et définir le opacité à 57%.
Utilisez l'outil Rectangle de sélection pour faire une sélection qui longe notre "conteneur d'image" et utilisez cette sélection pour créer un masque de calque..
Accentsconagua