AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


3 résultats trouvés pour e0e0e0

Boutons d'interface avec incrustation Lumineuse - Lun 18 Nov 2019 - 9:33



Bonjour, dans ce tutoriel dans allons voir comment créer des boutons de style laqué avec un élément incrusté lumineux.


Rendu Final
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design Sans_t10

Etape 1 : Les éléments de base


1. Création du document
On commence donc par créer un nouveau document de taille 1024*768 px avec une résolution de 72.

Je préfère travailler sur grand format, puis de réduire ensuite à la taille souhaitée.


Pour vous aider vous pouvez mettre un repaire vertical et un horizontal pour avoir un point centré.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design R3O8FDJTag e0e0e0 sur Never Utopia - graphisme, codage et game design BDZbVxwTag e0e0e0 sur Never Utopia - graphisme, codage et game design I8cMidvTag e0e0e0 sur Never Utopia - graphisme, codage et game design TV8SSOWTag e0e0e0 sur Never Utopia - graphisme, codage et game design YeSLf8G



2. Le fond de la création
Nous allons utiliser un fond assez clair pour accentuer les effets de contrastes.
On clique donc sur l'outil de remplissage (Pot de Peinture) et on change la couleur principale en #e0e0e0. Ensuite on créer un nouveau calque de remplissage gris.

Pour cela c'est simple : Calque > Nouveau Calque de remplissage > Couleur Unie > Gris


Ensuite on va ajouter une incrustation en dégradé sur le fond, dégradé linéaire, noir vers blanc avec une opacité de 2%.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design YCUTj0kTag e0e0e0 sur Never Utopia - graphisme, codage et game design Hd2oWMP



3. Nos éléments basiques
A ce moment nous créons nos formes basiques nécessaires à notre création.
On commence par choisir notre forme pour l'exemple je prends la forme Rectangle arrondie.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design K6XCFBI
Ensuite je vais changer un peu les paramètres pour dessiner depuis le centre, pour cela me suffit de cliquer sur la petite flèche noire en haut.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design F4cPmg2Tag e0e0e0 sur Never Utopia - graphisme, codage et game design ZCFl4kC
Et je dessine mon plus grand rectangle (le contour extérieur autrement dit) en une couleur un peu plus sombre que le fond. Ainsi grâce à notre repère et à notre paramètre on peut directement le centré.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design 1UY7CO7
Ensuite j'en dessine un autre , qui sera notre centre intermédiaire, en blanc.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design DI8WR8S
Et pour finir j'en dessine un troisième en gris foncé qui sera notre centre.


4. Les effets intérieurs
Pour donner plus de réalisme on va jouer avec les ombres pour donner du relief.
On va donc allez jouer dans les options de fusion de notre forme blanche. On commence avec une incrustation en dégradé linéaire de couleurs #d4d4d4 vers #f7f7f7.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design BsmhxBA
On continue avec une ombre interne de couleur noir, avec une opacité de 8%, un angle de -90° et une distance et taille de 8px.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design KgcYFuR
Et on finit par une ombre portée avec une opacité de 16%, un angle de 90°, une distance de 3px et une taille de 10px.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design GaTozc4Tag e0e0e0 sur Never Utopia - graphisme, codage et game design Sif2aDq


5. Les effets en dégradés
Nous allons maintenant donner un peu de relief.
Pour commencer on va dans les options de fusion de la plus petite forme. On va se faire une incrustation en dégradé linéaire de couleur #dedede vers #ededed.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design Anze6iF
Puis on va régler de l'ombre interne blanche en opacité 60%, angle -90°, distance de 4 px et une taille de 5px.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design UdJWU5j
Puis une ombre portée blanche en opacité 60%, angle -90°, distance de 2px et taille de 5px.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design UXx11ndTag e0e0e0 sur Never Utopia - graphisme, codage et game design FlB1jRr
Et maintenant on s'occupe du relief de la plus grande forme.
Pour commencer on règle le calque avec Opacité de fond à 0%.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design Kgc6TGh
Puis on lui met une ombre interne noire d'opacité 5%, avec un angle de 90°, une distance de 5px et une taille de 21px.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design QeKupY2
Puis on lui ajoute une ombre portée noire d'opacité 7%, avec un angle de -90°, une distance de 3px et une taille de 5px.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design CcsQQrRTag e0e0e0 sur Never Utopia - graphisme, codage et game design O1ydTnx


6. Ajoutons plus d'ombre
Sur cette partie nous allons accentuer le relief grâce aux ombres.
Pour commencer on duplique notre forme blanche et on règle son opacité à 23%. On lui enlève tous les styles qui ont été copiés et on lui met une incrustation couleur noire.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design Rzyr2bD
On place ce calque en dessous du calque d'origine.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design 6SAPyDK
Et on va le bouger de 50px vers la gauche ou la droite au choix, pour cela une petite astuce on le bouge d'un cran en restant appuyer sur Alt Gauche.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design 14qhDf3
Ensuite sur ce calque on créer un masque d'ecretage
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design W6to93W
Puis on lui applique un contour progressif de 27px (CTRL Droide + Alt Droite + D)
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design O2LR3efTag e0e0e0 sur Never Utopia - graphisme, codage et game design 4bUffKN


Incrustation Lumineuse

1. On commence donc par écrire notre texte ou à mettre un brush comme on veut avec une couleur gris foncé. Pour le tuto j'utilise la police bariol.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design BQAy0YV
On commence par lui attribué une incrustation dégradé Noir-Blanche Linéaire.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design Q2SlMol
Puis on applique une incrustation de couleur #65b5f0 en opacité 83%.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design YppUs48Tag e0e0e0 sur Never Utopia - graphisme, codage et game design IwF18mI

2. Nous allons renforcer l'effet lumineux maintenant.
On applique donc une lueur interne de couleur #7fc9ff en Densité Couleur -, une opacité de 30%, une source centre, une taille de 10px et un contour Demi-cercle
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design 4wXtyQm
Puis on lui met un Biseautage et Estampage. Taille de 4px, Angle 90°, Elévation 50°, Opacité des modes des tons clairs 70% et opacités des modes tons foncés 20%.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design Cp93CQMTag e0e0e0 sur Never Utopia - graphisme, codage et game design 4BPsu7c

3. Puis on lui donne un peu de volume.
On lui applique une lueur externe #b5b5b5 avec une opacité de 100%, mode de fusion Normal et taille à 5px.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design I4HHa5i
Ensuite on ajoute une ombre portée, mode normal avec une couleur blanche avec une distance de 9px et une taille de 5px ainsi qu'un angle de 90°.
Tag e0e0e0 sur Never Utopia - graphisme, codage et game design A1pO1oB


Et voilà c'est fini. Plus qu'à redimensionner selon vos besoins.

Tag e0e0e0 sur Never Utopia - graphisme, codage et game design Sans_t10

Shoki

(NIHIL) Je reviens avec une QEEL :3 - Jeu 24 Déc 2015 - 9:28

Waaaaaaaaaaaaaaaaaaaa **
Merci Nihil :love:

Je vais juste enquiquiner le monde Rolling Eyes (Bon pas sur le fait qu'il manque quelques accents, au pire c'est pas très grave Rolling Eyes en fait si : t'as oublié le chapeau sur le "a" de "âme" et l'accent sur le "e" de "Démons" xD Et c'est pas " il y a avait", c'est "il y avait" :toto: Oui je sais je casse les c...ouloirs :toto:) :

• Pour la transition sur les 3 "petits" blocs, tu pourrai mettre cette couleur à la place : #E0E0E0 ?

• C'est normal qu'il n'y est pas la phrase pour la cb ? o:

• A la place de "Il y a X habitant", tu pourrais mettre "Il y a en tout X habitants" ?

• Et.... Je crois que ça sera tout :toto:

Encore merci :love:

Minishiro

[Astuce] Fonctionnement des codes hexadécimaux - Mar 25 Déc 2012 - 0:07


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Bonjour!

Ah, les codes hexadécimaux! Ces bé-bêtes donnent du fil à retordre à bien des codeurs, expérimentés comme débutants, et nombreux sont ceux qui doivent se fier à des générateurs de code pour produire la couleur idéale, souvent par essais et erreurs. Eh bien, l'astuce que je vous sers aujourd'hui ne remplacera certes pas lesdits générateurs, mais peu à peu, vous serez probablement capable de les utiliser moins souvent, voire pas du tout dépendant des situations. :)

Pour ceux qui ne le savent pas, il y a quatre façon de générer des codes de couleur sur le web.
white, black, blue, etc. → ce sont les noms des couleurs en anglais.
rgb(XXX,XXX,XXX) → ce sont les quantités de rouge, vert et bleu dans la couleur, représentées par une valeur allant de 0 à 255.
rgba(XXX,XXX,XXX,0.X) → même principe que le rgb, mais avec la transparence en nombre décimal entre 0 et 1.
#XXXXXX → codes hexadécimaux.


Les codes hexadécimaux sont nommés ainsi car ils comportent, vous l'aurez deviné, 6 chiffres ou lettres. Les deux premiers chiffres donnent la quantité de rouge, les seconds de vert et les derniers de bleu, comme ceci:
#XXXXXX


En effet, les couleurs primaires sur le web ne sont pas les mêmes que celles des arts plastiques (magenta, cyan et jaune). Les codes hexadécimaux vont de 00 à FF de la manière suivante:
00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 2A, 2B, 2C, 2D, 2E, 2F, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 3A, 3B, 3C, 3D, 3E, 3F, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 4A, 4B, 4C, 4D, 4E, 4F, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 5A, 5B, 5C, 5D, 5E, 5F, etc.


00, c'est le noir, c'est l'absence absolue de la couleur. FF, c'est la saturation maximale. Ainsi:
#000000 = noir
#FF0000 = rouge
#00FF00 = vert
#0000FF = bleu
#FFFF00 = jaune
#00FFFF = cyan
#FF00FF = rose
#FFFFFF = blanc


Lorsque les codes de rouge, vert et bleu sont les mêmes, la saturation de la couleur est nulle; ces codes correspondent aux différentes nuances de gris.

#000000 = noir
#111111 = gris 1
#222222 = gris 2
#333333 = gris 3
#444444 = gris 4
#555555 = gris 5
#666666 = gris 6
#777777 = gris 7
#888888 = gris 8
#999999 = gris 9
#AAAAAA = gris 10
#BBBBBB = gris 11
#CCCCCC = gris 12
#DDDDDD = gris 13
#EEEEEE = gris 14
#FFFFFF = blanc
#000000 = noir
#101010 = gris A
#202020 = gris B
#303030 = gris C
#404040 = gris D
#505050 = gris E
#606060 = gris F
#707070 = gris G
#808080 = gris H
#909090 = gris I
#A0A0A0 = gris J
#B0B0B0 = gris K
#C0C0C0 = gris L
#D0D0D0 = gris M
#E0E0E0 = gris N
#F0F0F0 = gris O
#0F0F0F = gris AA
#1F1F1F = gris BB
#2F2F2F = gris CC
#3F3F3F = gris DD
#4F4F4F = gris EE
#5F5F5F = gris FF
#6F6F6F = gris GG
#7F7F7F = gris HH
#8F8F8F = gris II
#9F9F9F = gris JJ
#AFAFAF = gris KK
#BFBFBF = gris LL
#CFCFCF = gris MM
#DFDFDF = gris NN
#EFEFEF = gris OO
#FFFFFF = blanc


Lorsque tous les chiffres d'un code sont les mêmes, il est possible de n'en mettre que les trois premiers (note: ça ne fonctionne pas en BBCode). Les majuscules sont facultatives:


Voyons donc comment ces belles informations peuvent vous être utiles! :) Supposons que nous partons d'un rouge:

Finalement, ce rouge est trop vif et trop pâle. Nous voudrions le rendre plus foncé.

Et puis, il est encore trop vif, nous allons ajouter du vert et du bleu pour en baisser la saturation.

Comme nous avons ajouté de la couleur, elle est à nouveau trop pâle.

Et puis, ça serait bien que ça tire un peu sur le bourgogne, nous allons donc ajouter du bleu.

Et on aimerait que ça soit encore un peu plus foncé.

Et voilà! Bon, certes si vous êtes daltonien, il se peut que vous ne voyez pas ou peu la différence des nuances entre ces différentes étapes, mais sinon vous devriez le voir. :)

En espérant que ça serve! ^^


Revenir en haut

La date/heure actuelle est Ven 19 Avr 2024 - 13:47