Share
Dans ce tutoriel, je vais vous montrer un effet très simple qui, associé à une bonne photographie, peut être utilisé pour obtenir de superbes résultats. Nous allons composer une salle en utilisant des photos d'objets. Cette salle peut ensuite être utilisée dans Flash pour créer un site Web ou simplement sous forme graphique..
En fait, j'ai composé cette composition il y a environ un an et demi. Il a été utilisé sur le site Web FlashDen Showroom que j'ai créé en tant qu'outil de marketing et de promotion pour l'un des sites soeurs de Psdtuts +, FlashDen.net..
Dans ce tutoriel, je vais compiler la première salle. Dans la suite je ferai la troisième pièce. Dans la dernière partie de cette série, je produirai une nouvelle salle avec plus d'étapes de détail que les deux premiers tutoriels, car pour ces deux premiers travaux, je vais sur du vieux travail plutôt que de créer quelque chose à partir de zéro..
Cet effet repose essentiellement sur de nombreuses bonnes photos. Malheureusement, cela signifie que ce didacticiel est davantage un guide général que vous devez suivre explicitement, étape par étape. À moins, bien sûr, que vous ayez envie d'aller acheter toutes les photos dont vous aurez besoin pour le faire. Vous pouvez tous les obtenir sur iStockPhoto, bien que je n’ai pas les URL exactes car je les ai achetées il y a longtemps et que mon compte a littéralement des milliers de fichiers téléchargés :-) En tout cas, voici une mini-image de tous.!
Tout d'abord, voici le produit fini. Après avoir produit cette maquette dans Photoshop, j'ai ensuite recréé le site en Flash avec des animations et des boutons, etc. Vous pouvez voir le site Flash Showroom ici.
Vous pouvez également cliquer sur l'image ci-dessous pour voir la vue complète.
L'image finale est maintenant 1024x768. La première chose que j'ai faite a été de placer l'image d'arrière-plan principale. Malheureusement pour moi, ce sont les mauvaises dimensions (comme vous pouvez le voir ci-dessous). Je pouvais l'agrandir et le recadrer, mais je perdrais ensuite certains des jolis détails que je souhaitais utiliser plus tard. J'ai donc choisi d'étendre la photo..
Heureusement, le travail n’est pas trop difficile car la partie supérieure de la photo est assez simple. L'astuce consiste à utiliser des dégradés de couleurs choisis dans l'arrière-plan actuel pour agrandir la photo..
J'ai d'abord utilisé l'outil Plume pour dessiner une forme (illustrée) que je voulais remplir avec mon dégradé. Notez que la forme recouvre une partie de la surface de la photo. C’est pour que je puisse ensuite utiliser une gomme douce pour effacer les bords et le faire disparaître gracieusement. J’ai ensuite pris une teinte sombre à droite et une teinte claire à gauche et dessiné un dégradé linéaire dans une nouvelle couche au-dessus de la photo. Cela a été suivi par un léger effacement le long du fond pour mélanger.
Je répète la même chose mais sur le côté gauche avec la zone gris clair. Encore une fois, la forme que je dessine sur la photo est plus grande que nécessaire, ce qui me permet d'effacer le fond pour obtenir un mélange homogène..
Enfin, l’ombre de droite semblait un peu inégale. J’ai donc ajouté un troisième calque en haut et, à l’aide de l’outil Plume, a tracé une forme autour du canapé et lui a donné un dégradé allant du foncé au clair pour obtenir un ombrage plus uniforme. éliminer toute trace de l'endroit où j'ai mélangé les images.
Maintenant que l'arrière-plan est prêt, nous pouvons commencer à placer des objets. Avant de faire cela, je devrais dire quelques mots sur le type d'images que vous voulez choisir:
Quoi qu’il en soit, pour chaque objet, vous utilisez simplement l’outil Plume, tracez le contour de l’objet, puis cliquez avec le bouton droit de la souris sur le canevas, sélectionnez Créer une sélection dans le menu qui apparaît, puis copiez l’objet de son arrière-plan et collez-le. votre toile principale. Il existe d'autres moyens d'extraire des objets: vous pouvez utiliser l'outil Baguette magique, par exemple, lorsque l'objet est sur un blanc plat. Toutefois, je trouve qu'il est beaucoup plus propre et beaucoup moins difficile à utiliser avec l'outil Plume. Si vous utilisez l'outil Baguette magique, assurez-vous d'utiliser une photo plus grande, puis redimensionnez-la pour masquer les effets de pixellisation de merde..
Vous pouvez également utiliser l'outil Filtre> Extraire, mais ce n'est pas beaucoup plus facile et le résultat n'est pas toujours aussi bon.
Quoi qu'il en soit, alors voici que j'ai placé la télévision sur mon fond. Comme il y a de l'ombre sur le côté droit de la pièce et que celle-ci est plus claire sur la gauche, j'ai également examiné la télévision avec l'outil Graver afin de l'adapter un peu plus. La lumière et les ombres sont très importantes pour que les objets correspondent à leur environnement. Dans ce tutoriel particulier, nous ne ferons pas grand-chose de cela, mais nous allons dans la troisième partie de cette série.
Dans tous les cas, le téléviseur a déjà l’air beau, mais il devrait vraiment créer une ombre sur le mur en bas et à droite. Actuellement, on dirait qu'il flotte dans l'espace, alors corrigeons cela.
Il y a beaucoup de façons de créer des ombres. Dans ce cas, je viens de créer un calque sous le téléviseur, puis avec un pinceau doux et un noir sélectionné, j'ai peint en bas et à droite. (Au fait, je ne suis pas sûr de savoir pourquoi j'ai laissé ces outils et ces palettes d'historique dans la capture d'écran; c'est là un peu de tutoriel paresseux :-)
Comme vous pouvez le constater, l’ombre correspond à ce à quoi on pourrait s’attendre si la lumière venait en haut et à gauche, ce qui correspond à l’image de fond que nous collons..
Après cela, j'ai placé une image sur le téléviseur. Je l'ai placé dans un nouveau calque, puis lui ai donné un style de calque Inner Shadow avec une distance de 0. Cela crée un peu d'ombre le long des bords et donne à l'image un aspect inséré. C'est un peu un effet rapide et sale. Vraiment, si vous vouliez faire la télévision comme il convient, je vous suggérerais de changer de téléviseur, puis d'observer ce qui se passe sur les bords et les types de surbrillance que le verre / écran a de la lumière. Mais dans ce cas, la télévision est petite et quand je passe en Flash, je place des vidéos ici, donc ce n'est pas si important.
Ensuite, nous voulons placer l'ordinateur portable. Comme avec la télévision, j'ai coupé l'ordinateur portable et la souris de leurs images respectives. Je les ai réduites à l’aide de l’outil de transformation (Ctrl + T) et les ai placées de manière appropriée. J'ai ensuite dessiné un cordon de souris (voir l'étape suivante).
Pour que l’ordinateur portable ait l’impression qu’il soit vraiment là, j’ai dessiné un cordon de souris qui passe au-dessus du coussin et s’allonge sur le sol. Cela permet de donner aux objets l’impression qu’ils interagissent vraiment avec leur arrière-plan et pas seulement.
Je l'ai fait en prenant mon outil de plume et en imaginant où irait le cordon de la souris s'il était vraiment là. On aurait dit que cela irait le long du coussin, puis tomberait sur le sol, puis sur le sol (pas vraiment sorcier, mais je pensais le préciser de toute façon!). Puis, une fois le tracé tracé, j'ai cliqué avec le bouton droit de la souris et sélectionné Stroke Path et utilisé une brosse dure de 2 pixels avec des couleurs gris clair.
Une fois que le cordon a été tiré, j'ai utilisé l'outil de gravure pour appliquer un peu d'ombre sur le cordon afin de le rendre plus réaliste (car en réalité tout a des parties d'ombre et de lumière et aucun objet n'est en réalité une couleur plate)..
Ensuite, nous devons ajouter une ombre sous l'ordinateur portable et la souris. L'ombre de la souris est assez simple: il s'agit simplement d'une obscurité floue sur le point de se multiplier sur le tapis. Pour l'ordinateur portable, vous voulez que l'ombre descende sur le bord du coussin.
Dans la capture d'écran ci-dessous, j'ai soulevé l'ordinateur portable afin que vous puissiez voir correctement l'ombre que j'ai dessinée. Une fois encore, je viens de le créer avec un pinceau doux et des couleurs sombres, puis je règle le calque sur Multiplier pour qu'il se mélange mieux à la photo ci-dessous. Parce que le coussin a un bord où l'ombre passe par-dessus le bord (sur la partie la plus à droite), j'ai fait changer légèrement l'angle de l'ombre et descendre le coussin.
Avec les haut-parleurs situés à droite, j'ai pratiquement fait la même chose qu'avec un ordinateur portable: créer un calque sous la photo, dessiner dans des couleurs sombres la forme située sous l'objet et le régler sur Multiplier..
Pour déterminer le type d'ombre qu'un objet va créer, il suffit d'observer les objets dans la vie réelle et de voir comment ils projettent des ombres avec des lumières différentes. Pour ce type d'image, l'ombre n'a pas besoin d'être parfaite, elle doit juste être assez bonne. Vraiment, si vous regardez de près, vous verrez que parfois les hautes lumières et les ombres n'ont pas vraiment de sens (par exemple, remarquez avec les haut-parleurs dans la capture d'écran ci-dessous, le côté gauche du haut-parleur droit est sombre et inversement pour le côté gauche. orateur, alors que si la lumière est à gauche, c’est le contraire de ce qui devrait se passer). Mais pour une image comme celle-ci où vous voulez seulement approcher le réalisme, l'effet fait l'affaire et trompe l'œil..
Pour l’horloge en haut à gauche, j’en ai juste dessiné un avec Photoshop - remarquez que c’est juste un tas de rectangles les uns dans les autres, qui utilisent des dégradés et un peu de surbrillance en haut à gauche. Je ne parlerai pas trop de cette étape car ce tutoriel a pour but de compiler des choses ensemble et non de dessiner de fausses horloges :-) Autant dire que je ne pouvais pas trouver la bonne horloge et que ça a marché..
Enfin, j'ai placé beaucoup de texte ici et là et des boutons et ce que vous avez et le look est complet.
Comme je l'ai dit au début, un tel effet ne présente pas de difficulté majeure du point de vue des compétences techniques pures de Photoshop. Il s’agit plus de développer votre œil pour reconnaître comment les choses doivent s’harmoniser, choisir un bon jeu de photos à composer, et ajouter des ombres et des rehauts pour unifier le tout..
L'effet final avec les bonnes photos peut être très agréable et convient particulièrement à Flash, vous permettant de faire voler ou de matérialiser des objets..
Vous pouvez voir le site Flash Showroom ici ou vous pouvez également cliquer sur l'image ci-dessous pour voir la vue complète.
Dans la prochaine partie de cette série, nous allons parcourir une autre pièce de la même manière. Il n’ya probablement pas beaucoup plus à ajouter, mais il est toujours intéressant de revoir le processus. Dans la dernière partie, je vais créer une autre pièce à partir de rien et essayer de capturer tous les détails du processus. Alors, jusqu'à la prochaine fois!
Note de l'éditeur: Ce tutoriel précède le lancement de nos abonnements PLUS. Malheureusement, il n'y a pas de fichier PSD d'accompagnement.
Accentsconagua