Illusion Art
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
-21%
Le deal à ne pas rater :
LEGO® Icons 10329 Les Plantes Miniatures, Collection Botanique
39.59 € 49.99 €
Voir le deal

Web design.

+4
Kabylifornien
Nico'
ElChe'
Neon'
8 participants

Aller en bas

Web design. Empty Web design.

Message par Neon' 17/11/2009, 15:48

J'ai commencé ce web design mais j'aurais voulu faire quelque chose de grandiose.
Malheureusement je ne trouve pas :/
Je n'ai peut être pas les bonnes ressources.

Spoiler:

En sachant qu'il y a trois parties : Haut / Milieu / Bas.

Bref j'aimerais faire quelque chose de magique mais je bloque.

Que me conseillez vous ?
Neon'
Neon'
I.A. Manager
I.A. Manager

Windows 7 Google Chrome Photoshop


http://neonart74.deviantart.com/

Revenir en haut Aller en bas

Web design. Empty Re: Web design.

Message par ElChe' 17/11/2009, 16:09

Euh déjà fais la strucure boutons etc...

Ensuite tu auras une vue générale tu pourra songer à décorer enfin moi je procède comme-ça.

Mais comme on dit, haces comme you will!
ElChe'
ElChe'
I.A. Elite
I.A. Elite

Système d'exploitation Navigateur Logiciel graphique


Revenir en haut Aller en bas

Web design. Empty Re: Web design.

Message par Neon' 17/11/2009, 16:25

Je sais bien que je dois faire les boutons ^^
Mais je laisse les boutons en texte.

La c'est plutôt l'habillage. Pour les sous vêtements on verra plus tard.

Je me demande surtout ce que je peux rajouter sur les côtés par exemple pour que ça fasse super classe.
Neon'
Neon'
I.A. Manager
I.A. Manager

Windows 7 Google Chrome Photoshop


http://neonart74.deviantart.com/

Revenir en haut Aller en bas

Web design. Empty Re: Web design.

Message par ElChe' 17/11/2009, 16:27

Ah par exemple un ballai avec une trainer d'étincelle ou un truc comme sa.
ElChe'
ElChe'
I.A. Elite
I.A. Elite

Système d'exploitation Navigateur Logiciel graphique


Revenir en haut Aller en bas

Web design. Empty Re: Web design.

Message par Nico' 17/11/2009, 17:08

J'ai aucune idée xD

Tu vas me demander pourquoi je postes alors? Parce je le trouve superbe le diz, déja comme il est ^^
Nico'
Nico'
I.A. Admin
I.A. Admin

Windows Vista Opéra Photoshop


http://chromium-art.deviantart.com

Revenir en haut Aller en bas

Web design. Empty Re: Web design.

Message par Kabylifornien 17/11/2009, 17:34

Je vois pas quoi ajouter d'autre essaie des brush magique :p XD .
Sinon j'ai rien a dire quoi c'est pas mal comme sais ^^' !
Kabylifornien
Kabylifornien
I.A. Graph
I.A. Graph

Windows 7 Google Chrome Paint Shop Pro


Revenir en haut Aller en bas

Web design. Empty Re: Web design.

Message par Neon' 17/11/2009, 19:19

Je sais bien que c'est pas mal ^^
Mais moi je veux que ça soit exceptionnel.
Erf...
Je vais chercher des brush magiques comme dit Kaby et je vous poste la suite ^^
Neon'
Neon'
I.A. Manager
I.A. Manager

Windows 7 Google Chrome Photoshop


http://neonart74.deviantart.com/

Revenir en haut Aller en bas

Web design. Empty Re: Web design.

Message par WT 23/11/2009, 10:46

Bah je trouve que c'est très bien comme c'est aussi perso.
Les brush magiques, c'est presque la solution de facilité (Harry Potter = Magicien = chose magique), alors que l'état actuel du diz, donne un coté un peu plus mature et plus sombre, j'ai l'impression ^^
WT
WT
Fondateur
Fondateur

Windows XP Firefox Photoshop


https://www.youtube.com/user/TheWarriortidus/videos?flow=grid&

Revenir en haut Aller en bas

Web design. Empty Re: Web design.

Message par Neon' 23/11/2009, 10:54

Certes, mais je trouve que ça fait un peu vide.
J'ai finalement enlever le fond en brique car ça ne rendait pas bien.

forum test :
http://magicperou-univers.forumactif.ws/forum.htm

Je suis toujours sur l'idée de rajouter des effets mais j'avoue sécher un peu ^^

( J'aimerais bien avoir l'avis d'aka également =) )

Merci WT =)
Neon'
Neon'
I.A. Manager
I.A. Manager

Windows 7 Google Chrome Photoshop


http://neonart74.deviantart.com/

Revenir en haut Aller en bas

Web design. Empty Re: Web design.

Message par Nico' 23/11/2009, 17:08

Je préférais le fond de briques que tes petits flocons de neige ><'
Nico'
Nico'
I.A. Admin
I.A. Admin

Windows Vista Opéra Photoshop


http://chromium-art.deviantart.com

Revenir en haut Aller en bas

Web design. Empty Re: Web design.

Message par Linkyo 23/11/2009, 18:03

Le fond en brique était plutôt bien !
Je pense que tu devrais rajouter de la couleur, ça te permettrait surement de rajouter de "la magie" à ta création... car c'est un peu monochrome là :s
Belle création sinon, le thème est bien représenté.

Petite idée d'effet "magique" : avec un brush rond soft de taille 2 pixels, va dans les options du brush, et change le mode de diffusion ainsi que le paramètre de taille et d'opacité (de manière à étaler plus ou moins aléatoirement les points et à les rendre plus ou moins opaques et gros). Peint vers tes personnages en restant appuyé, de façon à avoir un flux de points continu. Puis ajoute une lueur externe à ces points (de la couleur qui te convient).
Pas certain que ça rende bien, mais c'est souvent le cas Wink
avatar
Linkyo
I.A. VIP
I.A. VIP

Système d'exploitation Navigateur Logiciel graphique


http://www.linkyo.eu

Revenir en haut Aller en bas

Web design. Empty Re: Web design.

Message par cosmoss 23/11/2009, 18:16

Des écritures dorés je donne une idée comme ça. ^^
cosmoss
cosmoss
I.A. Expert
I.A. Expert

Système d'exploitation Navigateur Logiciel graphique


http://manga-suki-desu.forumactif.org/forum.htm

Revenir en haut Aller en bas

Web design. Empty Re: Web design.

Message par Yros 25/11/2009, 20:40

Bon bon bon . . . J'ai fais un tour sur le forum test. Déjà le premier truc ( enfin les deux ) qui me sautent aux yeux :
1 - La barre de navigation est ... tu veux vraiment que je te le dise ? =X Elle est simpliste comme pas possible, minuscule en plus ( je m'étonne de l'avoir vue ), elle cadre mal, et en plus de ça ... bref =/
2 - Le positionnement des groupes ... Ok y'a de l'idée, mais c'est vraiment un positionnement de graphiste ! >< Ce que je veux dire c'est qu'il ne faut pas oublier que derrière tout ça, y'a du code =/ Imagine tu vires un groupe, t'en rajoutes un, bam ! Owned le design =/ En plus lorsque tu auras des membres, ça va t'exploser tout ça car ça va dépasser par le bas avec la liste entière ...
Un autre détail : au niveau du Who is Online, sur la gauche y'a pas de cadre du coup ça fait un peu trop " rompu " avec le fond.

Bref ça c'était les aspects négatifs ( et déjà tu dois me prendre pour un chieur de première qui sort d'on ne sait où et t'aurais pas forcément tort ^^' ). Pour les points positifs, je dis bravo au fond ( header + fond plus précisément ), c'est beau et harmonieux, et j'aime les couleurs <3

Bref, assez d'éloges. Quelques conseils tirés de mon expérience personelle des forums maintenant :
Vu que t'es un graphiste talentueux ( si si ), pourquoi tu sors une barre de navigation pareille ? Sérieusement ? Non, non ! Il faut voir plus grand ù.ù Dit toi que la barre de navigation fait PARTIE de ton design ( quelque part c'est vrai, non ? ).

Au lieu de faire des trucs ovales rikikis, sort des beaux boutons intégrés au style ! Tu vois la ligne courbe en bas du header ? ( le truc cyan qui délimite le header/la bannière du reste du forum ). Bon, maintenant imagine tes boutons en dessous de cette ligne. Genre, tu prend le côté gauche, tu descend de ( à la louche ) 50px ( à la louche hein tu feras comme tu veux c'est pour t'expliquer ) et tu trace un trait. Maintenant tu sélectionne tout ce qui est au dessus, entre ce trait et la ligne en bas du header et tu as ta zone pour les boutons de la barre de navigation.

Après, libre à toi de l'intégrer comme tu veux Wink Vu qu'à droite ça remonte pas mal, je verrais bien quelques effets à ce niveau là ( genre pour le bouton " s'enregistrer " par exemple et " nouveau message " ).
Concernant la façon dont tu pourras mettre ça en place, il te suffit d'ouvrir ton fond sous 'toshop, tu crées un calque par dessus tout, et dessus tu sélectionne la zone de la barre de navigation. Attention ! Certes elle devra suivre en haut la ligne qui sépare la bannière du reste MAIS à la fin les boutons devront tous être de la même hauteur ( à savoir la plus haute hauteur ) pour que ça reste bien aligné.

Bref si t'as besoin d'explications approfondies, je te fais un schéma ce sera plus simple que d'expliquer ^^

Concernant la partie " Who is Online " maintenant ... Il faut que tu fasses avec le code =$ Déjà la zone de texte ( le tableau de droite qui contient les informations ) est trop petit et, lorsqu'il y aura beaucoup de monde, ça débordera forcément ( ça déborde déjà sur ton site test et t'as personne ). Donc un poil plus élargie ( sur la droite notamment ) et placée plus haut ( j'vois pas pourquoi t'as laissé genre 50px à partir du haut =/ ).

Déjà, rien qu'avec une nouvelle barre de navigation ( et rajoute des <*br /> - sans le * - après pour laisser de la place avec les pubs de merde qu'il y a sur fofo-actif ), je peux te dire que ton design sera déjà bien plus stylé, même s'il l'est déjà Wink

Voila j'espère que ça t'aidera =)
Yros
Yros
I.A. Amateur
I.A. Amateur

Système d'exploitation Navigateur Logiciel graphique


http://aelyon.eg2.fr/

Revenir en haut Aller en bas

Web design. Empty Re: Web design.

Message par Neon' 26/11/2009, 18:37

Merci pour tous tes conseils =)
Néanmoins ce n'étais pas vraiment les points que je souhaitais travailler car le codage est un peu plus compliqué que tu ne le pense.
La barre de navigation est en codage. Ce ne sont pas des images, c'est donc pour ça que j'ai essayé d'habiller les boutons avec un fond légèrement ovale.
Néanmoins je ne peux pas mettre de boutons en image pour ce genre de design codé sinon la bannière et l'image du milieu seraient séparées et l'on verrait le fond.
( Je ne m'y connais pas assez pour faire des boutons image qui passent par dessus la bannière. )

Pour le QEEL je ne vois pas ce que tu veux dire par déborder ? ^^
Le cadre des conectés s'agrandira lorsque il y aura des membres conectés. En aucun cas cela ne dépassera en bas =)

L'image ne correspond pas finalement au reste du thème. Une amie graphiste à qui j'ai confié quelques images me refera une nouvelle image d'un autre genre.

Ensuite pour l'espace de 50 picel , je vais essayer d'arranger ça =)

Pour les publicités, sur mon forum je les enlève donc ça sera beaucoup plus harmonieux =)
Je n'avais pas envie de payer pour les enlever sur le forum test juste pour voir à quoi ça ressemblerait ^^

Merci pour ton avis en tout cas Smile
Neon'
Neon'
I.A. Manager
I.A. Manager

Windows 7 Google Chrome Photoshop


http://neonart74.deviantart.com/

Revenir en haut Aller en bas

Web design. Empty Re: Web design.

Message par Yros 26/11/2009, 19:10

Oh ne t'inquiète pas, je connais très bien étant donné que je maitrise xHTML et Css et que je me met doucement mais surement au Php Wink
Je vais même d'ailleurs te donner tout de suite l'astuce pour que ça marche sans décaler la bannière et le fond :

Il te suffit tout simplement de faire ceci :
- Le fond via Css ( .body { background: url(...) } )
- Le header via Css ( pareil ) ET via HTML ( tu fais une balise image avec la classe CSS contenant le header mais vide : alt="blank" )
- et de là tu peux rajouter tes boutons de la barre de navigation simplement à leur place, soit normalement, soit via css, bref comme tu veux ^.^

Et même, une astuce si tu veux, tu peux même mettre tes boutons de la barre de nav' via CSS et faire un effet .hover pour quand la souris passe par-dessus l'image ( si tu veux des détails, sans problème ).

Pour le cadre des enregistré, j'ai vu après avoir posté en fait (* j'avais pas fait gaffe au premier coup d'oeil *) xD Ça ne change rien à ma remarque sur les groupes ( si tu en enlèves ou en rajoute un ) mais concernant le QEEL donc ça fait bizarre de voir que les statistiques et les membres en lignes sont séparés ^^

Voilou =P

Edit : si tu veux de l'aide pour la mise en place de la barre de navigation, n'hésite pas à demander Wink
Yros
Yros
I.A. Amateur
I.A. Amateur

Système d'exploitation Navigateur Logiciel graphique


http://aelyon.eg2.fr/

Revenir en haut Aller en bas

Web design. Empty Re: Web design.

Message par Neon' 26/11/2009, 19:20

Eh bien merci pour ta proposition.
En effet ça m'a l'air intéressant =)
J'aimerais beaucoup pouvoir faire de jolis boutons alors ^^
Je te demanderais très vite par MP.
Merci =)
Neon'
Neon'
I.A. Manager
I.A. Manager

Windows 7 Google Chrome Photoshop


http://neonart74.deviantart.com/

Revenir en haut Aller en bas

Web design. Empty Re: Web design.

Message par Yros 26/11/2009, 19:22

Mais de rien Wink
Peu de gens connaissent toutes les astuces qu'on peut faire rien qu'avec un peu de HTML et Css donc autant partager ^^

Ps : pour ceux qui liraient ceci et souhaiteraient comprendre, j'explique brièvement :
On peut attribuer des images en utilisant deux manières :
- HTML : avec la balige <img src="{lien de l'image}" alt="{laisser vide}"/> ( sans les {} )
- Css : en créant une " classe " qui contiendrait l'image que l'on souhaite attribuer. Exemple :
Code:
.header {
    background: url(liendelimage);
}
Bon c'est la présentation standard vous pouvez rajoutez des options aussi ( taille & co ). L'idée ici est donc de jouer sur les deux tableau et de passer par le Css pour le header et le fond, afin que les images ne se séparent pas une fois que l'on aura rajouté la barre de navigation, qui elle pourra être composée de la manière normale ( via html ou les images normales ).

Voila l'idée ^^
Yros
Yros
I.A. Amateur
I.A. Amateur

Système d'exploitation Navigateur Logiciel graphique


http://aelyon.eg2.fr/

Revenir en haut Aller en bas

Web design. Empty Re: Web design.

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum