Créer un arrière-plan original pour vos pages

Arrière-plan, background, deux mots mais un même défi : faire original et professionnel. La team WebAcappella vous présente deux façons de réaliser un arrière-plan pour votre site qui ne soit pas qu’un simple fond de couleur !

Solution 1 : Les patterns

patternUn pattern est une image utilisée avec le mode répétition verticale et/ou horizontale pour créer un effet mosaïque.

Pour utiliser un pattern dans votre maquette, allez dans « Propriétés de la page » accessible dans WebAcappella depuis le menu « Pages/Maquettes ». Sélectionnez votre image puis réglez la répétition verticale et horizontale et finissez par enregistrer les modifications en cliquant sur « OK ».

Plusieurs sites proposent de générer gratuitement des patterns de qualité avec une large variété de motifs :

  • bgpatterns.com : une application en ligne pour créer, en quelques clics, un pattern totalement personnalisé. Vous allez pouvoir générer un fond dont vous règlerez le motif, la taille, les couleurs, etc. Une fois que votre choix est fait, vous pourrez télécharger l’image et l’intégrer ensuite dans votre maquette.
  • patterncooler.com : un large choix de motifs (environ 255) à personnaliser comme vous le souhaitez : changer les couleurs, ajouter une texture dont vous pouvez facilement changer les couleurs, ajouter une texture. Vous obtiendrez gratuitement un fichier .PNG que vous pourrez réutiliser pour votre background.
  • stripemania.com : c’est le site qu’il vous faut visiter pour créer des patterns avec des rayures que vous pourrez orienter comme vous souhaitez : verticales, horizontales, obliques. Là encore, vous pourrez définir les couleurs de votre charte.

Une première solution pour votre maquette à allier avec l’élément « couleur » qui vous permettra de créer un fond coloré uni (blanc par exemple) pour mettre vos textes, photos, etc.

Notre conseil : pour créer vos patterns, choisissez des couleurs proches, par exemple deux couleurs dans une même gamme tonale. Il est important que les couleurs et le fond de page ne prennent pas visuellement le pas sur les informations contenues dans le site.

Solution 2 : Une image de fond

Une autre possibilité s’offre à vous pour avoir un arrière-plan qui change : mettre une image.

fond-couleurPréférez une image de grande taille, plus large que haute, et intégrez-la dans votre maquette réglée sur 900 ou 1000 pixels de large maximum (depuis les « Propriétés de la page ») pour que la photo qui sert de background soit visible même sur un écran d’ordinateur portable.

Pour un meilleur rendu, n’utilisez pas le mode « répétition » mais n’hésitez pas à centrer votre image dans votre maquette en faisant un clic-droit sur la maquette et en réglant les « Propriétés de la page ».

Vous risquez de rencontrer un problème : la photo va être délimitée et fortement contrastée avec la couleur de fond que vous aurez définie pour votre site.

> La solution de la team WebAcappella :

degradé

Ouvrez votre image dans un logiciel de retouches d’images (ex : Photoshop, Paint, Gimp) pour insérer, en bas de l’image, un dégradé vertical qui ira (du bas vers le haut) d’une couleur vers de la transparence. Enregistrez votre image en .JPEG.

Dans WebAcappella, insérez maintenant cette image avec dégradé comme fond pour votre maquette. Toujours depuis les « Propriétés de la page », sélectionnez maintenant un fond de couleur identique au dégradé de votre image. Utilisez pour cela la pipette. Finissez par valider en cliquant sur « OK ».

fond-image

N’hésitez pas à insérer avec ce type de fond, un élément « couleur » pour mettre en page vos textes. Cela sera du meilleur effet et cadrera votre page dans le navigateur internet.

Et voilà, dites au revoir au fond uni de votre site et bonjour à plus de personnalisation pour un site qui vous ressemble !