Welcome, Guest

Please login or register

TUTORIALS SUBMENU

PHOTOSHOP    FLASH    ILLUSTRATOR    BLENDER    CINEMA 4D    WEB-CODING    [SUBMIT]

Related Links

Vis et Rivets


Les interfaces à aspect métalliques semblent être de saison, très utilisées notamment dans les sites de clans online.  Alors que les textures de métal sont de mieux en mieux réalisées, on voit peu souvent des petits détails qui permettent d'assembler ces plaques de métal à d'autres éléments. C'est la qu'intervient ce tutoriel. Nous allons mettre en place la création de rivets/vis afin d'ajouter ce petit détail qui va faire ressortir votre site. Suivez le guide ;)

Étape 1: Créez tout d'abord un document de 200*200px, la couleur du fond importe peu.   Creéz un nouveau calque puis créez ensuite un cercle à l'aide de l'outil de selection circulaire (en maintenant la touche Shift enfoncée, vous aurez un cercle de proportions identiques).   Passez ensuite vos couleurs de premier & arrière plan en blanc et noir (respectivement).

Étape 2: Selectionnez l'outil dégradé sur la palette des outils tout en gardant votre selection active puis, comme sur l'image de l'étape 1, tracé un dégradé en diagonale du centre vers l'exterieur (choississez notamment dans les options le style circulaire pour appliquer le dégradé).  Vous devriez arriver à un résultat similaire à celui présent sur la gauche.

Étape 3: On va donner un aspect plus "metallique" à votre sphère.   Dans le menu, faites : Image > Réglages > Courbes… from the menu et recréez une courbe similaire à celle sur l'exemple.  Cliquez sur Ok pour acceptez et regardez vote sphère à présent. Pas mal nan ?.   Si vous trouvez que la luminosité ou le contraste sont mauvais, vous pouvez toujours les modifier via le menu Image > Réglages.

Étape 4: Maintenant, passez dans les options de fusion du calque : Calque > Style de calque > Incrustation en dégradé… et entrez les paramètres présent sur votre gauche.

Étape 5: Créez maintenant un nouveau calque, puis selectionnez l'outil de selection rectangulaire et et créez un rectangel comme sur l'image que vous remplirez de gris foncé.  Toujours sur ce calque, appuyez sur Ctrl puis cliquez dans la palette des calques sur le calque contenant votre sphère (sous celui ci normalement) puis contractez la selection d'1 px: Selection > Modifier > Contracter . Cliquez sur Ok puis inversez la selection et appuyez sur Suppr.

Étape 6: Beaucoup de tutoriels s'arretent à ce niveau, mais soyons fous, on va rajouter quelques petits effets.    Sur votre calque, nous allons ajouter une lueur interne, faites : Calque > Style de calque > Lueur interne puis rentrez les paramètres comme sur l'image sur votre gauche.  Ne cliquez pas encore sur Ok, c'est pas fini :)

Étape 7: Passez sur l'option d'incrustation en dégradé puis entrez de nouveau les paramètres présents sur votre gauche. Cette fois c'est fini, cliquez sur ok :)

Étape 8: Et voila, on a terminé avec notre vis :) Pas mal comme résultat non ? .  Avec une bonne texture en arrière plan, une Lueur externe et une ombre portée sur votre sphère, vous obtenez un résultat bluffant. Lorsque vous ajoutez des vis sur votre interfaces, pensez à leur faire effectuer une petite rotation différente à chacune, l'effet de réalisme n'en sera que meilleur.

Tête cruciforme : Cette tête de vis requiert l'ajout dans l'étape 5 d'un second rectangle positionné perpendiculairement à son homologue.   Il est préférable avant de passer à l'étape 6 de passer un ptit moement à appliquer le tutoriel d'anti-aliasing.   Il semble sur l'image que le résultat ne soit pas splendide mais lorsque vous réduirez la taille de votre vis pour l'ajouter à votre interface, vous verrez la différence ;).

Rivets: Cette fois, au lieu de creer un rectangle dans l'étape 5, il vous faut créer un cercle..  Il vous faut ensuite dans l'étape 7 modifier le style de dégradé en Radial et ajouter une petite lueur interne. Il y a plusieurs résultat possibles et avec un peu de patience, vous devriez pouvoir tomber sur quelque chose qui vous plaise...il ne vous reste plus qu'à les ajouter à vos interfaces   :)

- Tutorial written by Man1c M0g
- Translation by Bana

Automatic Translations: Translate Into French Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese
Amazing Font Pack!

Featured Tutorialsmore

The Last Remainder
The Last Remainder
- Adobe Photoshop -
Asphalt Textures
Asphalt Textures
- Adobe Photoshop -
Old Movie Effect
Old Movie Effect
- Adobe Photoshop -
Glassy Pill Buttons
Glassy Pill Buttons
- Adobe Photoshop -
Membership

Username:
Password:  
Remember Me

Lost Password? || Register

Related Links



Special Options
Download Source File
Printer Friendly Version
Forum Threads

 Deactivate Account
Author: jerinian
Posted: Oct 02nd, 11:16am
Activity: 1 replies, 880 views
 changes....
Author: supertackyman
Posted: Sep 12th, 2:56am
Activity: 2 replies, 1044 views
Back again and with free webhosting :)
Author: ngz
Posted: Aug 14th, 3:50pm
Activity: 0 replies, 1049 views
Cartoon Crab 6 Legs Walk Run created in Blender
Author: patricia3d
Posted: Jun 19th, 12:58pm
Activity: 0 replies, 1927 views
HTML Form Post Array to PHP
Author: Space Cowboy
Posted: May 25th, 2:18pm
Activity: 0 replies, 1824 views
My blog where i create Digi Scrapbook
Author: claudya07
Posted: May 11th, 2:33pm
Activity: 0 replies, 14435 views
Blood Dripping from Letters
Author: patricia3d
Posted: Apr 05th, 3:37am
Activity: 0 replies, 2741 views
A New Designer has joined the ranks
Author: skates1
Posted: Mar 28th, 2:19pm
Activity: 2 replies, 2769 views
The hole in Photoshop
Author: Mars
Posted: Feb 13th, 9:28pm
Activity: 2 replies, 3434 views
Colour Swatch
Author: ebz7350
Posted: Jan 15th, 11:18am
Activity: 0 replies, 2352 views
 BioRUST Forums - Reply to Topic
Author: inonShozy
Posted: Jan 11th, 11:32am
Activity: 8 replies, 2494 views
 Version 2 of my portfolio site.
Author: andrewnleon
Posted: Jan 08th, 6:18am
Activity: 6 replies, 2796 views
Forum Threads

--- Site Resources ---
Total Tutorials:212
Total Downloads:    441
Total Fonts:    4673