Share
Les derniers jours, je cherchais de l'inspiration dans de célèbres peintures anciennes et je me suis intéressé à "Starry Night" de Van Gogh. Et la réponse est oui! Puis, après plusieurs heures de travail, voici mon tutoriel, une conception de sites Web artistiques illustrant le concept "Magic Night"..
Commençons la conception! Tout d'abord, il ne s'agit pas d'un didacticiel de base, je vais donc sauter quelques explications de base. Quoi qu'il en soit, quiconque ayant un niveau avancé de compétences en Photoshop pourra le faire. Deuxièmement, il est très difficile d’obtenir exactement le même résultat que moi et vous devez utiliser votre imagination et votre bon goût pour obtenir quelque chose de similaire ou de meilleur que mon design. Et troisièmement, cela a été conçu en considérant l’application dans un modèle Wordpress, mais vous pouvez rapidement le convertir en thème d’un autre moteur, voire en un site Web personnalisé..
Aller de l'avant alors! Créez un nouveau document de 960 pixels sur 1 000 pixels et RVB. Dessinez des repères pour marquer les limites et allez à Image> Taille du canevas pour redimensionner le document en augmentant la largeur du canevas (1460 x 1000 px). De cette façon, votre conception sera centrée dans un gros document et vous verrez à quoi elle ressemble dans les résolutions d'écran large. En outre, dessinez un guide pour marquer la hauteur de l'en-tête.
Dessinez un repère horizontal au milieu du document et utilisez-le pour remplir le calque "Arrière-plan" avec un dégradé radial bleu foncé (# 0D2B53 - # 010D1F). J'ajoute également quelques guides comme limites du remplissage de la page principale à gauche et à droite.
Il est très possible que nous modifions la hauteur du document ultérieurement. Ajoutez donc un nouveau calque de remplissage (# 010D1F) sous le calque "Arrière-plan"..
Étant donné que l'un des lecteurs de Psdtuts + a suggéré d'utiliser des images réelles au lieu du filtre Cloud classique, nous allons essayer cette fois. Collez cette image de certains nuages d'orage dans un nouveau calque nommé "Nuages" et changez son mode de fusion en superposition. Ensuite, allez à Calque> Masque de calque> Tout masquer, et tracez un dégradé radial du blanc au noir (#FFFFFF - # 000000), qui va du milieu en haut au fond presque. Puis ajustez un peu les niveaux de "nuages" pour assombrir les nuages.
Maintenant, collez cette belle ligne d'horizon d'une côte espagnole dans un nouveau calque nommé "skyline". Créez ensuite un nouveau calque de réglage> Mélangeur de canaux… et sélectionnez Noir et blanc avec filtre bleu (RVB). Ensuite, pour appliquer cet effet uniquement au calque "skyline" de la palette des calques, maintenez la touche Option enfoncée et cliquez entre le calque Mélangeur de couches et le calque "skyline". Enfin, modifiez le mode de fusion du calque "skyline" en superposition.
Appliquez un masque de calque> Tout révéler au calque "skyline". Utilisez ensuite un pinceau souple grand et noir (# 000000) pour masquer les bordures de l'image, puis sélectionnez un pinceau grunge (j'utilise ce set de pinceaux grunge de Kelzky13, en particulier les pinceaux 250 et 181), puis redonnez un peu plus les bordures. irrégulier.
Tapez ensuite le titre "Magic" en utilisant la police Scriptina. Appliquez ensuite les styles de calques illustrés ci-dessous: une lueur extérieure (# 9EB6D0) et une superposition de dégradé (# 70ABF6, #FFFFFF, # B4CBE7, à #FFFFFF). De plus, le moment est venu d'organiser notre conception en développement dans des dossiers. Placez tous les calques dans un nouveau dossier nommé "Arrière-plan" et le texte situé dans un autre dossier nommé "Logo".
Nous allons maintenant ajouter quelques étoiles à notre conception. Vous pouvez utiliser n’importe quel jeu de pinceaux étoiles, mais j’utilise cet ensemble: les pinceaux de champ en étoile de BL1nX. Puis, à l’aide du pinceau 550 du jeu, peignez les étoiles en blanc (#FFFFFF) dans un nouveau calque dans un dossier nommé "Étoiles". Notez que je mets l’étoile la plus brillante sur le point de la je. Appliquez ensuite un calque dégradé en utilisant trois couleurs (# 3A8FEF, #FFFFFF et # 66C9FC) sur le calque "Stars1"..
Ensuite, en utilisant le pinceau 615 du jeu de champs d'étoiles, ajoutez plus d'étoiles au ciel dans un nouveau calque nommé "Stars2", puis supprimez les étoiles au-dessus des bâtiments à l'aide d'une gomme douce. Ensuite, ajoutez un éclat externe (# 8AB2FF) à "Stars2".
Ajoutez plus d'étoiles au calque "Étoiles 2" dans l'ensemble du dessin, puis à l'aide de l'outil Gomme, supprimez certaines zones des étoiles. Enfin, appliquez un effet de calque dégradé au calque "Etoiles2", en utilisant quatre couleurs: # 6AB1D1, #FFFFFF, # 94CFED et #FFFFFF..
Téléchargez maintenant ces pinceaux étoiles de jen-ni et conservez-les à portée de main, car nous les utiliserons plusieurs fois dans ce tutoriel. Sélectionnez un pinceau de 65 px (j'utilise le numéro 148) et tracez une étoile blanche (#FFFFFF) dans un nouveau calque juste au-dessus du point de la je. Appliquez ensuite un éclat externe (# 00BCF9) sur l’étoile pour la rendre plus lumineuse..
Dupliquez le texte "magique", sélectionnez le texte et tapez le mot "nuit" à sa place. Ensuite, définissez la lueur externe sur blanc (#FFFFFF) et la superposition de dégradé sur trois couleurs (# F9DA5B, # FEAE00 et # FFD403), voir l'image ci-dessous pour vérifier les valeurs du filtre..
Ajoutons quelques nuages à notre nuit! Téléchargez les pinceaux Clouds II de la rousse. Ensuite, sélectionnez le numéro de pinceau 2464 et définissez sa taille sur 960px (correspondant à la largeur principale de la disposition de conception). Définissez la couleur de premier plan sur # 234B7F et collez un seul nuage dans un nouveau calque nommé "cloud1". Pour que les couches restent organisées, je place les nuages dans un dossier séparé à l'intérieur du dossier "Arrière-plan". Maintenant, étirez un peu la hauteur "cloud1".
Après, esquivez et brûlez un peu le nuage. Notez que j'éclaircis les zones à côté de l'étoile avec logo et assombris le bas du nuage. En outre, changer l'opacité "cloud1" à 50%.
Ajoutez un nuage de plus dans une nouvelle couche appelée "cloud2". Vous pouvez utiliser n’importe quel nuage, mais utilisez cette couleur au premier plan: # 5F83A5. Esquiver un peu le bas du nuage pour améliorer la sensation d'éclairage.
Répétez l'étape précédente en utilisant cette fois un autre pinceau de cette couleur: # 36638C et placez-le au-dessus du "nuage1". Redimensionnez-le, puis Dodge et / ou Gravez le nuage si nécessaire.
Sélectionnez une grosse gomme douce et supprimez le bas du calque "cloud1" pour créer un effet de fondu..
Il s'agit en réalité d'une étape critique. Nous allons ajouter l'arrière-plan du conteneur principal. N'oubliez jamais que vous concevez pour le Web. À l'aide de l'outil Rectangle, tracez un rectangle vectoriel (# 0A1D37) dans un nouveau calque, le tout en dessous du dossier "Nuages". Notez que mon rectangle est à l’intérieur des guides de remplissage. Sélectionnez ensuite le calque rectangle et accédez à Calque> Masque de calque> Tout révéler… et tracez un dégradé blanc à noir, ce qui ajoute un bel effet au sommet du rectangle. Enfin, déposez un guide sous l'ouverture en fondu du rectangle, ce qui nous aidera lorsque nous transformons cette conception en HTML + CSS. Notez que du guide au bas de la couleur de fond doit être uni.
Maintenant, ajoutez un autre rectangle mais cette fois-ci comme arrière-plan de la barre latérale, aidez-vous à nouveau avec un guide et utilisez la couleur # 091525. Ensuite, appliquez au nouveau rectangle un masque de calque un peu comme à l'étape précédente..
À ce stade, l’en-tête de base est terminé. Il est maintenant temps d'ajouter quelques détails. Je vais mettre une icône RSS unique sur l'en-tête. Copiez cette image de la pleine lune et collez-la dans un nouveau calque nommé "moon-rss". Ajustez ensuite les valeurs de Teinte / Saturation pour rendre la lune un peu plus jaune, puis ajoutez les filtres Inner et Outer Glow (voir les valeurs indiquées ci-dessous)..
Ajoutez une petite forme de nuage avec la couleur # 7997B3 dans un nouveau calque au-dessus de la lune dans la palette des calques. Puis, en utilisant une grosse gomme douce, supprimez certaines zones du nouveau nuage.
Ajoutez la forme classique RSS (# DCA30B) dans un nouveau calque devant le calque "lune" mais derrière le calque "nuage". Appliquez ensuite les filtres indiqués ci-dessous (une superposition de dégradé, une lueur extérieure et une ombre portée). Enfin, ajoutez une étoile quelque part sur la forme RSS (voir l’étape 10)..
Collez cette image dans un nouveau calque, nous l’utiliserons comme arrière-plan de la barre de navigation de nos pages principales. Comme l'image d'origine est un peu étirée, nous devons l'agrandir davantage. J'ai joué avec les deux sélections et avec l'outil Déplacer (Transformation libre) pour augmenter la largeur du défilement. Ensuite, déformez un peu le parchemin en utilisant le drapeau Warp.
Esquiver certaines zones du parchemin pour augmenter les ombres et améliorer l'illusion de chaîne.
Pour améliorer la texture du défilement, appliquez également un filtre Superposition de dégradé (# 045F96 et # FBF4BD), ainsi qu'une superposition de motifs..
Ajoutez maintenant une ombre portée au parchemin. Vous pouvez utiliser le filtre Ombre portée ou faire ce que j’ai fait, dupliquer le calque de défilement et, sur Teinte / Saturation, régler l’éclaircissement sur -100, atténuer un peu la copie noire et la déformer à l’aide de l’outil Transformation libre pour la rendre irrégulière..
Ensuite, ajoutez un nuage par-dessus le défilement, l'esquive, la gravure et la suppression, comme à l'étape 15. Ensuite, ajoutez le texte du lien Pages à l'aide de la police Georgia - Italic. Utilisez la couleur # 0B1827 pour les liens standard et la couleur # 211808 pour le lien survolé. Ajoutez également quelques détails supplémentaires, tels que des étoiles sur l’arrière-plan et une ligne comme effet de survol. Vous pouvez voir la structure des couches en bas de l'image ci-dessous.
Pour un dernier détail dans la barre de navigation des pages, créez un nouveau calque au-dessus du défilement et, à l’aide d’un pinceau à particules, tracez une ligne comme si c’était une peinture à l’aquarelle (voir l’image ci-dessous). Faites-le quelques fois de plus, mais en utilisant des couleurs différentes. En outre, dans la barre de navigation "Étoiles", opacité inférieure à 40%.
Ajoutez le texte lié au RSS. J'utilise 10 px Aria, en jaune (# F2C90D) et en blanc (#FFFFFF). N'oubliez pas de définir la méthode anti-aliasing sur Aucune, car la plupart des navigateurs affichent le texte sans anti-aliasing (IE7 et Safari sont les exceptions)..
En tant que détail supplémentaire, ajoutez cette photo d'un joli ballon. Extrayez le ballon de son arrière-plan et placez-le quelque part sous le logo, ajoutez une superposition de couleurs (# 1F416E - Mode de fusion: superposition) au calque "Ballon" pour faire correspondre les couleurs de la scène. En outre, vous pouvez graver un peu le côté gauche du ballon.
Ensuite, en utilisant le pinceau 615 des pinceaux à champs d'étoiles (voir l'étape 8), ajoutez d'autres étoiles au-dessus du ballon et du parchemin. J'ajoute également un accord au ballon en peignant une ligne courbe blanche avec un pinceau plein de 3 px. En outre, utilisez la gomme ici et là pour réduire le nombre d'étoiles.
Il est temps d'ajouter un post. Tout d'abord, ajoutez le titre et la ligne de métadonnées dans un nouveau calque nommé "Post". Voir l'image ci-dessous pour afficher les valeurs de caractère. De plus, j'ajoute une petite étoile près des métadonnées en tant que détail visuel..
Ajoutons plus d'informations dans le dossier "Poster", car la liste sur la page d'accueil aura un aperçu de plusieurs messages. Nous allons ajouter une image d'aperçu à gauche (200 px sur 200 px avec un effet Stroke de 1px) et un bref texte à droite. Nous ajouterons également un aperçu du nombre de commentaires de la publication en haut à droite. Pour le champ de commentaires, créez un nouveau dossier nommé "Commentaires" et ajoutez un arrière-plan minuscule avec un petit nuage et des étoiles. En gros, il suffit de répéter l’une des étapes précédentes lors de la conception de l’en-tête, mais dans une infime mesure. Ajoutez ensuite le nombre de commentaires et le mot commentaires au dessous de.
Ensuite, ajoutez un Mots clés ligne en dessous du poteau et ajoutez une petite étoile à droite de cette ligne. Ajoutez un petit champ d'étoiles comme arrière-plan pour le message, juste si vous le souhaitez. Enfin, dessinez un séparateur (# 1D324F) pour le message à l’aide de l’outil Ligne..
Ensuite, dupliquez le dossier "Publier" et éditez les copies pour créer deux ou trois publications différentes. Il est très possible que la hauteur de votre document doive être augmentée à ce stade. Pour ce faire, utilisez l’outil Rogner ou Image> Taille du canevas, comme à l’étape 1. Lorsque vous avez redimensionné votre document principal, augmentez la hauteur des deux arrière-plan et arrière-plan latéral aussi bien.
Travaillons sur la barre latérale maintenant. Nous allons ajouter le formulaire de recherche. Créez un nouveau dossier nommé "Sidebar" et à l'intérieur, créez-en un autre et nommez-le "Rechercher". Dessinez un nuage dans ce dossier, puis esquivez-le et donnez-lui une apparence qui ressemble à l'image suivante. Puis, à l’aide de l’outil Rectangle arrondi, tracez un rectangle au-dessus du nuage. Appliquez un effet de contour intérieur de 1px (# 697372) au rectangle et modifiez sa valeur de remplissage à 50%.
Ajoutez des étoiles blanches au-dessus de la couche de nuages en utilisant n’importe quel calque de champs d’étoiles. N'oubliez pas d'effacer toutes les étoiles supplémentaires. Ensuite, dupliquez, réduisez et Edition> Basculez horizontalement le calque "ballon" de l'étape 29. Placez-le dans le dossier "Rechercher". Ajoutez également le texte du titre en utilisant Georgia Italic et une belle couleur jaune (# D5A934). Ajoutez ensuite les instructions de recherche et le bouton "Aller!". Vous pouvez voir les valeurs du personnage au bas de l'image suivante. En dernier détail, tracez une seule étoile brillante derrière le texte..
Ajoutez le texte du contenu de la barre latérale, les titres, les liens et placez chaque section dans un dossier séparé. Ajoutez également un arrière-plan d'étoile douce sur chaque dossier et une étoile brillante derrière chaque titre. En outre, ajoutez une étoile brillante comme exemple de l'effet de survol sur n'importe quel lien. N'oubliez pas les guides de remplissage et de marge.
Nous arrivons à la fin. Ajoutons un pied de page pour la barre latérale. Tout d'abord, fondez un peu le fond de la peinture d'arrière-plan de la barre latérale avec un pinceau doux sur son masque de calque. Dessine ensuite quelques nuages, puis esquive et brûle-les. Assurez-vous que les nuages n'envahissent pas l'arrière-plan du contenu principal et ne dépassent pas la largeur de la barre latérale. Ajoutez ensuite un champ d'étoiles blanches derrière les nuages et dupliquez le ballon une fois de plus. Je sauvegarde tout cela dans un dossier nommé "Sidebar Footer".
Enfin, nous allons créer le pied de page. Tout d’abord sur le masque de calque de l’arrière-plan du contenu principal à l’aide d’un gros pinceau doux, masquez le bas pour le masquer. Sélectionnez ensuite des pinceaux de nuage et peignez-les au bas de la conception. Je combine de gros nuages bleu foncé (# 0B1C38) et de petits nuages bleus # 223E63), comme indiqué dans les images ci-dessous. N'oubliez pas que ces nuages deviendront une image d'arrière-plan, essayez donc de ne pas croiser le Guide entre le contenu et le pied de page. En outre, n'oubliez pas de placer toutes les couches associées au pied de page dans un nouveau dossier nommé "Pied de page".
Brûlez les nuages les plus légers. Ensuite, peignez un champ d'étoiles blanches en utilisant le pinceau 615 du jeu d'étoiles. Ensuite, peignez un champ d'étoiles plus brillant avec un pinceau différent, numéro 656 de la série. Enfin, supprimez le champ étoiles avec une grosse gomme douce.
J'espère que vous avez trouvé cela utile. Les membres PLUS peuvent télécharger le fichier PSD et modifier ce que vous voulez, ajouter ou supprimer des détails et créer votre propre design étoilé..
.
Abonnez-vous au fil RSS Psdtuts + pour les meilleurs tuts et articles Photoshop sur le Web.
Accentsconagua