Share
C'est assez étonnant de voir combien de couleurs et d'arrière-plans peuvent changer l'apparence d'un site Web. Dans ce tutoriel, nous allons mettre en place une mise en page rapide, simple mais efficace, puis créer des variations à l'aide d'arrière-plans, de photos et de motifs. Nous verrons également comment créer des arrière-plans en mosaïque sans soudure à partir d'une photo, des méthodes pour terminer une photo unique et des méthodes simples pour créer des motifs de pixels. En bref, c'est un tutoriel bourré!
Cet article est le premier jour de notre session de conception Web. Session créative Session Jour 2 "
Notre première tâche consiste donc à concevoir une mise en page pour notre page. Nous n'allons rien faire de trop compliqué, car le didacticiel concerne davantage les arrière-plans que les mises en page. Cela devrait quand même paraître beau et être une mise en page réaliste. Ainsi, dans l'image ci-dessus, vous pouvez voir mon plan de composants approximatifs de la page. J'ai prévu dans un menu et un sous-menu, un panneau d'introduction de la section et une zone de contenu. J'ai également prévu qu'il soit inférieur à 1000 px, de sorte que lorsqu'une personne sur un petit écran visualise le site, elle voit toujours l'arrière-plan correctement (car cela va constituer une caractéristique majeure de la conception)..
Maintenant, je devrais souligner qu'en réalité, je n'ai pas dessiné cet ensemble de boîtes comme cela. C’était plutôt comme s’embrouiller jusqu’à ce que je me dise "oooh, c’est une belle mise en page". Mais pour les besoins de ce tutoriel, il est plus logique de l'expliquer de cette façon.!
Donc, cette mise en page est notre os, nous devons maintenant l'étoffer avec du contenu factice et un jeu de couleurs.
Comme vous pouvez le constater, je n'ai rien fait de vraiment étonnant ici, je viens de placer les éléments sur la page de manière nette et uniforme. Alors notez cet espacement. Dans l'image, j'ai essayé de montrer comment différents éléments s'alignent (lignes jaunes), comment l'espacement est à peu près même verticalement et horizontalement, ainsi que des éléments supérieurs et inférieurs..
Notez que ce ne sont que des guides approximatifs et que je travaille en réalité jusqu'à ce que tout se passe bien. Mais si vous n’êtes pas sûr de l’espacement, il n’est pas mauvais de commencer. Lorsque vous serez plus à l'aise avec l'espacement, vous pourrez varier les choses et jouer avec des équilibres inégaux..
Dans l'image ci-dessus, vous pouvez voir que j'ai choisi une police d'affichage principale appelée Rockwell, que nous utiliserons dans le panneau d'en-tête pour donner à la page un peu de caractère. Si je construisais ce site, cela pourrait être une image ou inséré avec sIFR. Le reste du texte est consacré à Helvetica et Arial, bien entendu adapté à l’utilisation du langage HTML. J'ai également ajouté une illustration vectorielle d'un avion en papier que j'ai dessiné il y a des années et que je vends en stock. Bien sûr, dans un vrai projet, cette image aurait quelque chose à voir avec le site au lieu d'être simplement jeté au hasard comme je l'ai fait ici.
Enfin, j'ai utilisé une palette de couleurs chaudes et terreuses. En fait, je suis un peu fan des couleurs beige et terre et vous constaterez que je les utilise beaucoup. Je pense qu'ils font beaucoup pour rendre les sites Web plus conviviaux et plus accessibles..
La page a donc l'air bien, mais rien de très mémorable à son sujet pour l'instant et c'est un peu basique. Dans la prochaine étape, nous ajouterons du vernis.
OK, donc ici, vous pouvez voir exactement la même présentation, mais je l’ai affinée et ajouté deux éléments visuels pour lui donner du style. Le premier élément est la flèche coupée du menu latéral. Cela fait ressembler le panneau du milieu à une sorte de bulle de dialogue envahissante. Le deuxième visuel que vous verrez lorsque vous regardez de près est une sorte de thème de points.
En résumé, nous avons utilisé trois éléments visuels pour donner du style à la page: une illustration, une forme de grille intéressante et un thème subtil basé sur une forme simple. Plus tard, nous ajouterons un quatrième élément visuel - un arrière-plan - pour compléter le style du site..
Dans l'image ci-dessus, j'ai souligné tous les éléments de polissage que j'ai ajoutés. Il ne s'agit que de petits rehauts et dégradés de couleurs, de points et, bien sûr, de la flèche découpée. Vous pourriez également être intéressé par un article précédent que j'ai écrit il y a un an sur le polissage des conceptions Web ici sur Psdtuts+.
Donc, avec cela, nous avons notre mise en page de base!
Donc, le premier fond que nous allons échanger est une image en mosaïque. Dans ce cas, nous utilisons une photo de gazon que j'ai utilisée dans ce didacticiel (une série que je n'ai pas encore terminée) :-) Vous pouvez obtenir la photo de gazon originale sur Flickr..
Bien sûr, si vous essayez de paver la photo d'origine, elle ne sera pas très belle et il sera évident que vous ne faites que répéter la même image encore et encore. Au lieu de cela, vous devez modifier l’image pour qu’elle devienne transparente. Heureusement, je viens de mettre en place un tutoriel sur ce sujet même, alors dirigez-vous et lisez:
Parallèlement au changement d’arrière-plan, j’ai mis à jour la coloration pour l’adapter au nouveau look. Remarquez que j'ai évité d'utiliser la même nuance de vert clair et vert clair que l'herbe - cela aurait été écrasant. Au lieu de cela, choisir des nuances de verts plus ternes plus sombres et plus claires complète l'arrière-plan.
De tels arrière-plans sont parfaits pour ajouter des couches transparentes par-dessus. Ici, le panneau À propos et le menu ont une certaine transparence et cela semble génial, car vous pouvez voir une partie de l’herbe passer à travers et cela ajoute un peu de profondeur. Bien que vous puissiez simplement baisser l'opacité du calque approprié, une autre option consiste à ajouter quelques calques en plus, l'un avec un léger dégradé disparaissant et l'autre avec un surlignage de 1px..
Dans l'image ci-dessus, vous pouvez voir, par exemple, dans le menu que j'ai un bloc de blanc réglé sur une opacité de 70%, en plus de cela, il y a un dégradé de blanc à rien, et en plus, une ligne blanche de 1px sur le bord inférieur. Ces couches supplémentaires accentuent la transparence et donnent de la profondeur à l'image.
Toute cette transparence est donc facile à faire dans Photoshop, mais vous vous demandez peut-être à quel point il est possible de créer un tel design..
Heureusement, cela est possible grâce au format de fichier .PNG qui vous permet d’utiliser la transparence dans vos images. Une chose à prendre en compte est que, bien que vous puissiez faire de la transparence (par exemple, une opacité de 60%), vous ne pouvez pas utiliser les modes de fusion des calques (par exemple, Multiplier ou Superposer). Dans la conception de Photoshop, il est important de ne rien faire qui ne soit pas constructible. Tout ce que j'ai utilisé, ce sont les paramètres d'opacité. C'est plus limitant mais vous pouvez toujours obtenir de beaux effets.
Nous allons donc créer un test HTML rapide pour nous assurer que tout fonctionne comme prévu. Pour créer un fichier PNG transparent, nous allons d’abord fusionner les calques de notre forme de grand panneau. Comme toutes les couches ont une certaine transparence, le résultat final après la fusion est également semi-transparent..
Il suffit maintenant de copier cela dans un nouveau document Photoshop, puis de désactiver le calque d'arrière-plan (voir l'image ci-dessus) et vous devriez voir la transparence apparaître à travers.
Maintenant, allez à Fichier> Enregistrer pour le Web et les périphériques et choisissez PNG-24 parmi les options. Vous devriez voir la même transparence apparaître dans la fenêtre d'aperçu.
Ensuite, je vais faire la même chose pour quelques éléments d'image de plus, car dans notre test, nous voulons démontrer qu'il est possible de placer un fichier PNG transparent sur un fichier PNG transparent sur un fond d'écran..
Avec toutes nos images créées, il ne reste plus qu'à assembler du code HTML:
Test de fond / transparence
Donc, tout ce que nous faisons ici est de définir l’image d’arrière-plan pour être notre JPG en mosaïque. Puis en plaçant un
Cela fera pour prouver que cette conception est constructible. En fait, vous devez effectuer quelques corrections pour que cela fonctionne dans IE6, un La recherche Google révèle de nombreux articles sur le sujet, mais comme il s'agit de Psdtuts + et non de NETTUTS, nous le terminerons ici :-)
Ce qui est facilement fait avec un fond de texture difficile comme de l'herbe est encore plus facile à faire avec des textures plus simples comme cette texture de papier de Bittbox. Parce que l’image source est meilleure, vous pouvez créer des tuiles beaucoup plus grandes pour l’arrière-plan, qui ont bien moins de chances de paraître répétitives..
Une autre option pour les arrière-plans consiste en de simples modèles de pixels qui, une fois répétés, donnent un peu de texture à l’arrière-plan. Le motif présenté dans cette variante de la mise en page est celui que j'ai utilisé sur Creattica Daily.
Vous pouvez créer des modèles comme celui-ci très facilement. Pour créer cet effet, créez simplement une nouvelle image de 4 pixels de large par 5 pixels de haut et effectuez un zoom avant autant que vous le pouvez, puis dessinez avec les pixels suivants:
Puis appuyez CTRL-A tout sélectionner et aller à Édition> Définir un motif, donnez-lui un nom, vous pouvez appliquer le motif avec un Superposition de motifs à travers les options de fusion d'une couche. De retour sur votre fichier PSD principal, cliquez avec le bouton droit de la souris sur la couche à laquelle vous souhaitez ajouter le motif, puis sélectionnez Options de fusion Alors choisi Superposition de motifs. Dans l'image ci-dessus, j'ai défini le motif sur Multiplier sur un fond gris foncé.
C'est en fait assez amusant de jouer avec ces types de motifs de pixels. Les amateurs de pixels de K10K possèdent une bibliothèque de modèles de pixels que vous pouvez également consulter pour des conceptions bien plus avancées..
La dernière variante que nous allons examiner utilise une seule photo non traitée. Ici, j'utilise une belle photo de West Bay Cliffs de Cristiano Betta que j'ai trouvée sur Flickr:
C'est une belle photo large qui a donné une belle palette de couleurs. Alors voici quelques étapes rapides que j'ai prises pour placer l'image.
Ici, il est juste assis à l'arrière-plan de notre conception. Avec un peu de transparence, ça a déjà l'air plutôt chouette, mais ce qui se passe en haut à gauche?
En déplaçant la photo d'environ 50 pixels, les étranges parties décolorées ne sont plus sur la page. Le problème suivant est que nous ne pouvons pas avoir un fond de photo sans fin, nous allons donc le fondre en couleur.
En choisissant une couleur plus sombre de la mer, nous créons un nouveau calque et dessinons un dégradé passant de la couleur à la transparence. Cela se trouve bien au-dessus du fond de l'océan et le mélange.
Maintenant, le fond est un peu plat, il serait donc bon d’éclaircir un peu les couleurs. Pour ce faire, nous superposons la photo avec un dégradé de couleurs adapté à l'image..
Dans l'image ci-dessus, vous pouvez voir que j'ai dessiné dans un dégradé à l'aide des oranges et violettes de l'image d'origine..
Définition du dégradé sur Recouvrir et 70% éclaire vraiment le coucher du soleil et lui donne l'air beaucoup plus dynamique.
Le problème suivant est qu’il faut que la photo s’estompe sur les côtés. Cela va être délicat, car d’un côté nous avons une montagne et de l’autre, il n’ya que le ciel. La meilleure solution est donc probablement de se fondre dans les couleurs sombres. Pour la plupart des gens, ils ne verront pas cela, c'est juste pour tous ceux qui utilisent un écran géant et ouvrent leur navigateur directement.
Nous allons donc commencer par saisir une sélection verticale de 1 px de chaque bord le plus à l'extérieur de l'image et appuyer sur CTRL-T pour le transformer à travers. La raison pour laquelle nous faisons cela est que, si l'un des arrière-plans montre la couleur que je suis sur le point d'ajouter, il n'aura pas l'air bizarre.
Ensuite, nous ajoutons un nouveau calque et dessinons une ellipse géante en arrière-plan, appuyez sur CTRL-SHIFT-I pour inverser la sélection et la remplir avec la même couleur sombre que celle utilisée précédemment.
Maintenant, nous désélectionnons la couche et allons à Filtre> Flou> Flou Gaussien flouter notre couleur, en utilisant un rayon de 80px. Puis dupliquez ce calque et flouez-le à nouveau avec un rayon de 120px, puis une troisième fois avec un rayon de 160px. Cela devrait donner une belle graduation douce.
Ainsi, notre conception finale avec un arrière-plan photo pour la plupart des gens ressemblera à l'image ci-dessus. Mais nous pouvons être assurés que même une énorme fenêtre de navigateur ne révélera rien d’idiot.
Pour en savoir plus sur la conception avec de grandes images d’arrière-plan, lisez ces trois excellents articles:
Comme vous pouvez le constater, notre mise en page simple nous a permis de gagner beaucoup de temps et, espérons-le, vous obtiendrez quelque chose d'utile du processus.!
Cet article est le premier jour de notre session de conception Web. Session créative Session Jour 2 "
Accentsconagua
