Share
Cette année, les conceptions de sites Web de style grunge, texturé et dessiné à la main ont considérablement augmenté. Par nature, j'ai tendance à concevoir moi-même un look plus propre, mais je pensais essayer aujourd'hui grunge et écrire un tutoriel sur la création d'une texture de papier simple à partir de zéro dans Photoshop, puis l'associer à une mise en page Web pour créer un design soigné..
Ensuite, plus tard cette semaine, nous prendrons ce même design Web et je vous montrerai comment vous pouvez pousser le remixage au-delà du simple changement d'arrière-plan et de couleurs, ce qui vous permet de changer le style complet d'un dessin. Mais commençons par notre site de texture de papier!
Ce billet est le quatrième jour de notre session de conception Web. Sessions créatives "Session Day 3Session Day 5"
Vous pouvez obtenir un aspect de papier texturé de trois manières différentes:
Créer une texture dans Photoshop donne généralement un aspect plus stylisé que réaliste, mais il possède ses propres charmes. Cela signifie également que vous n'avez pas besoin d'images externes.
Nous allons donc commencer par créer un nouveau document, ce canevas mesure 1200 pixels de large x 900 pixels de haut. Ensuite, nous remplissons le calque d'arrière-plan avec une couleur beige - # e8e8e2.
Maintenant, créez un nouveau calque et créez vos couleurs de premier plan et d’arrière-plan: # 979a8f et # cfd1c5 qui sont des variations de la couleur d'origine. Ensuite aller à Filtre> Rendu> Nuages
Maintenant nous courons Filtre> Artistique> Couteau à Palette avec les paramètres indiqués dans l'image ci-dessus. Un couteau à palette transforme nos nuages en taches… en quelque sorte, cela donnera finalement une légère sensation de froissement à la texture..
Ensuite, nous allons ajouter du bruit à la toile en Filtre> Bruit> Ajouter du bruit en utilisant le réglage indiqué. Cela devrait rendre notre texture rugueuse.
Maintenant, nous prenons notre couche bruyante et rugueuse et la réglons sur Multiplier et 30%. Cela le tonifiera tout de suite.
Maintenant, créez un nouveau calque et créez vos couleurs de premier plan et d’arrière-plan: # 42433e et # cfd1c5 - qui est une version plus sombre du dernier jeu afin que nous obtenions plus de contraste cette fois-ci. Ensuite aller à Filtre> Rendu> Nuages
Ensuite, nous courons à nouveau le Filtre> Artistique> Couteau à Palette filtre.
Et cette fois, nous définissons la nouvelle couche sur Recouvrir et 60%. Cela devrait donner à notre texture un peu plus de profondeur.
Et c'est tout! C'est notre texture!
Pour ce tutoriel, la texture légère est parfaite, mais vous pouvez facilement faire d’autres variations simplement en jouant avec les outils de fusion. Par exemple, pour créer cette texture de papier brun foncé:
Si les variations de couleur ne suffisent pas, vous pouvez également changer la texture de la texture en utilisant différents filtres. Par exemple, ici, nous avons créé une sensation plus parcheminée en prenant notre texture légère et:
Maintenant que vous avez une texture, vous pouvez bien sûr la transformer en un arrière-plan parfaitement carrelé..
Pour ce tutoriel, nous utiliserons le premier texture que nous avons faite - celle de l'étape 8.
Alors maintenant, nous allons créer une mise en page de portefeuille pour aller avec notre texture de papier. Voici la structure approximative de la page d'accueil. Comme vous pouvez le constater, la structure est un peu plus compliquée que dans le didacticiel précédent sur la présentation Web, car cette fois, nous avons une disposition à l'intérieur de la disposition..
Donc, notre grille globale est une grille à trois colonnes, puis dans le panneau principal, nous avons utilisé cette grille pour diviser la zone en deux espaces principaux, l’un est la taille de la colonne 1 et l’autre s'étend sur les deux autres colonnes..
Nous allons donc d'abord créer un espace de travail et l'alléger. J'ai donc fait glisser deux guides sur l'écran, l'un à 100 pixels et l'autre à 1100 pixels - ce qui rend la zone dans laquelle je travaille exactement à 1000 pixels, ce qui est parfait..
Ensuite, nous créons un nouveau calque et dessinons une grande boîte blanche, comme indiqué..
Ensuite, nous allons remettre la case blanche à 25% opacité.
Ensuite, nous allons le rendre rugueux. Il y a beaucoup d'excellents pinceaux grunge, mais pour cette étape, nous allons simplement utiliser l'un des pinceaux standard de Photoshop. Vous pouvez le voir dans la capture d'écran ci-dessus avec le 60 en dessous.
Si ce pinceau n'apparaît pas pour vous, cliquez simplement sur cette petite flèche droite en haut de l'écran des pinceaux et choisissez Pinceaux de média humide, puis cliquez sur Ajouter pour les ajouter à votre ensemble actuel.
Alors choisissez le Outil Gomme (E), sélectionnez le pinceau que nous venons de mentionner, puis contournez les bords de notre forme et rendez-le rugueux comme vous le souhaitez. J'ai laissé le bord supérieur intact, comme vous pouvez le voir.
Créez ensuite un nouveau calque juste en dessous de la case blanche, puis tracez un calque. Gradient Radial (G) allant du blanc à la transparence. Cela va juste mettre en évidence où nous allons placer notre logo dans une seconde. Définissez le calque sur Recouvrir et 70%.
Nous allons maintenant ajouter un petit "logo" - dans notre cas, il ne s'agit que d'un mot placé dans une belle police. La police que j’ai choisie est Egyptian710 BT, une police assez connue et adaptée à nos besoins, car elle est très inégale - les majuscules sont plus épaisses que les minuscules - et les empattements de dalle ressemblent à une machine à écrire qui va avec notre thème de papier.
Nous allons ensuite créer un filigrane pour ajouter un peu plus de contenu en arrière-plan. En fait, vous pouvez devenir fou et ajouter des tonnes de choses dans la texture de fond, mais nous nous contenterons d'un seul filigrane..
J'ai donc écrit le mot Folio dans une police aléatoire (HumstSlab712 Blk) et je l'ai défini dans cette couleur - # c5c6ba.
Modifions maintenant le mode de fusion en Brûlure de couleur et 70% et nous ajouterons un trait de 1px comme indiqué. Notez que pour Type de remplissage J'ai utilisé un Modèle et ensuite choisi une texture que j'avais pendue. Lorsqu'il est combiné à une faible opacité (36%) et au mode de fusion (multiplier), notre contour a l'air d'avoir disparu en partie.
Nous allons maintenant déplacer notre filigrane derrière le logo.
Ensuite, nous allons créer un petit élément séparateur horizontal. Créez donc un nouveau calque et tracez une ligne de 1px dans le brun foncé.
Maintenant, prenez cette même vieille brosse à effaceur et parcourez la ligne en effaçant des petits morceaux pour la rendre affligée. Débarrassez-vous également des bords afin qu’il commence au même endroit que la case blanche.
Créez ensuite un nouveau calque ci-dessous et tracez-le dans une boîte brune mesurant environ 3 à 4 pixels, comme indiqué..
Définissez la boîte brune sur Multiplier et 5%. Ce sera une sorte d'ombre pour notre séparateur.
Créez ensuite un nouveau calque et tracez cette fois une zone blanche à environ 20 pixels au-dessus de la ligne..
Réglez la boîte blanche à environ 50% opacité et encore une fois en utilisant notre pinceau, il suffit d'effacer le haut d'une manière désordonnée.
Répétez maintenant les trois dernières étapes pour dessiner une deuxième boîte blanche, mais cette fois-ci, effacez-la davantage pour obtenir une bande blanche plus fine..
Lorsque les deux couches blanches sont combinées, elles donnent une sorte de surbrillance désordonnée.
Regrouper ces couches de séparation en un seul groupe de couches.
Maintenant, nous pouvons dupliquer notre groupe de calques pour en avoir trois copies pour former notre zone de grille horizontale, comme indiqué..
Ici, je viens de placer du contenu. Comme vous pouvez le constater, j'ai mélangé un peu de la police d'affichage avec une police de caractères HTML classique..
Pour le texte normal, j'ai utilisé Cambria, une police Vista. Dans le CSS, il est renvoyé par défaut en Géorgie pour les personnes qui ne possèdent pas les polices Vista. Si vous ne possédez pas les polices Vista, vous pouvez les obtenir librement et légalement, il vous suffit de suivre ces instructions. Il y a quelques polices soignées, j'aime assez Calibri aussi.
Nous allons maintenant ajouter notre panneau principal. Alors dessinez dans une grande boîte rectangulaire de couleur marron foncé - # 1e1a19 - et le faire en utilisant le Outil Rectangle Arrondi (U) avec un rayon de 5px.
Zoomez maintenant dans le coin supérieur gauche et saisissez un petit carré puis remplissez-le de la même couleur marron foncé. Nous ne voulons pas de courbe dans ce coin.
Maintenant, zoomez sur le coin en haut à droite et utilisez le Outil Lasso Polygonal (L) tout en maintenant la touche Maj enfoncée, effectuez une sélection en angle comme indiqué, puis appuyez sur Effacer.
Maintenant, dans un nouveau calque au-dessus, dessinez un carré de couleur marron clair, par exemple # 352f2b, puis faites une autre sélection en biais et effacez la moitié du carré pour vous laisser avec un triangle à 1 pixel du bord.
Créez ensuite un nouveau calque et zoomez à nouveau dans le coin supérieur gauche. Nous allons maintenant faire notre onglet forme. Nous faisons cela en utilisant l'outil stylo et quelques clics très précis. Dans l'image ci-dessus, j'ai désactivé tous les calques d'arrière-plan afin que vous puissiez voir la forme avec précision. Voici comment vous le faites:
Après que vous ayez fait le cinquième point, vous pouvez simplement compléter le reste de la forme à n’importe quel mode, car nous allons couper le bord inférieur pour qu’il reste parfaitement droit..
Une fois que vous avez terminé la forme, faites un clic droit et choisissez Faire une sélection.
Maintenant, vous pouvez remplir la forme avec du brun foncé pour correspondre à la boîte principale. Ensuite, coupez les pièces supplémentaires du bas pour qu'elles soient bien plates et se placent parfaitement sur le dessus, comme indiqué.
Ensuite, nous allons dupliquer notre couche d'onglets et déplacer la nouvelle au dessous de le vieil onglet (donc le marron semble être devant). Puis faites un clic droit sur notre nouvel onglet et choisissez Options de fusion et lui donner un Superposition de couleurs de cette belle couleur rouge-orange - # cc5630. La raison pour laquelle nous réalisons une superposition de couleur et ne remplissons pas simplement l'onglet avec la nouvelle couleur est que si vous appliquez la deuxième méthode, il restera quelques pixels bruns visibles à travers.
Maintenez enfoncé CTRL et cliquez sur le premier onglet puis choisissez le Outil de chapiteau rectangulaire et appuyez plusieurs fois sur la flèche droite jusqu'à ce que votre sélection se déplace pour chevaucher l'onglet orange. La raison pour laquelle je dis que vous devriez choisir l'outil de sélection dans cette étape est que pour déplacer une sélection, vous devez disposer d'un outil de sélection. Si au lieu de cela, vous utilisiez l'outil de flèche standard, vous déplaceriez les pixels ainsi que la sélection. Essayez les deux et vous verrez ce que je veux dire.
Maintenant, nous créons un nouveau calque entre les deux onglets et complétons notre sélection avec une couleur orange plus sombre. - # b44724. Puis maintenez CTRL et cliquez sur le calque orange, puis cliquez sur CTRL-SHIFT-I pour inverser la sélection, cliquer sur la couche du milieu et appuyer sur Effacer. Cela devrait vous laisser avec seulement la partie orange plus sombre qui chevauche l'onglet orange.
Comme vous pouvez le constater, nous avons créé une sorte d’ombre sur notre deuxième onglet..
Maintenant, si je le dis moi-même, ces onglets sont superbes, et la raison en est qu'ils se chevauchent. Malheureusement, cela les rend également plus difficiles à utiliser en HTML. Vous pouvez toutefois effectuer diverses opérations avec des PNG transparents, ou alternativement, faire en sorte que le texte change de couleur lors des survols et que vous ne craigniez pas de changer les couleurs des onglets. Quoi qu'il en soit, tout cela dépasse un peu le cadre de ce tutoriel. Autant dire que le menu pourrait être un peu difficile à construire.
Alors voici notre mise en page jusqu'à présent. J'ai ajouté quelques onglets et leur ai donné du texte.
Nous allons maintenant dessiner dans la zone de travail sélectionnée. Ce sera un simple rectangle blanc où le travail ira. Ensuite, derrière, créez un autre calque et utilisez le Outil Lasso Polygonal (L) dessiner une sorte de rectangle débile et le remplir d'une couleur marron foncé - # 0e0c0c.
Ensuite, nous ajouterons du texte descriptif à gauche et l’article lui-même. Notez qu'avec le texte que j'ai utilisé un brun foncé pour les deux descripteurs (Titre du projet et Description du projet), cela les fait disparaître en arrière-plan, ce qui est bien car ils ne sont pas si importants. Le titre du projet et le texte descriptif se distinguent par contre. Ces deux derniers éléments sont définis dans une couleur beige clair choisie dans l’arrière-plan, le titre étant plus clair que le texte..
De plus, j'ai ajouté un léger dégradé radial à l'échantillon de travail, passant du blanc au beige clair - simplement parce que j'aime les dégradés radiaux et que je ne peux pas en avoir assez :-)
Pour finir, je vais ajouter quelques petits gribouillis dessinés à la main pour terminer le dessin. Pour cela, j'ai utilisé David Leggett de l'excellent et libre pinceau dessiné à la main de Tutorial9. Vous pouvez ajouter des pinceaux en ouvrant la palette de pinceaux comme indiqué, en cliquant sur la petite flèche droite et en choisissant Brosses de charge, puis en sélectionnant le fichier de pinceau que vous avez téléchargé.
Comme les pinceaux sont beaucoup plus gros que je ne le souhaite, il est important de rendre le calque plus net après l'avoir redimensionné. Donc ici, j'ai rétréci la flèche, puis exécuter un Filtre> Netteté> Masque flou pour le réparer.
Nous y voilà donc, le design final, avec quelques variantes pour différentes pages. Les conceptions PSD finales sont bien sûr disponibles sur ThemeForest, et je vais ajouter la page d'accueil PSD au système Plus.
Voilà donc mon point de vue sur une sorte de mise en page de texture de papier. Beaucoup de créateurs font cela beaucoup mieux que moi, notamment le travail de Liam McKay sur WeFunction et les galeries de créations telles que WebCreme. Vous y trouverez de nombreux motifs en papier épurés et bien rangés..
Ce billet est le quatrième jour de notre session de conception Web. Sessions créatives "Session Day 3Session Day 5"
Accentsconagua