Mise en page / transparence / background intelligent

Bonsoir à tous,

Voila, j'aimerais avoir un avis concernant le depart d'un site internet.

Depuis plusieurs jours j'essaye d'analiser mon design, pour voir comment je pourrais découper tout ca de la meilleur manière qu'il soit.

Voici une image grossière de ce à quoi ressemble la maquette.

http://img15.hostingpics.net/pics/296045exemple.jpg

L'idée est que, mon site repose sur un background que j'ai fais moi même, tous les éléments ont des effets liés à cet unique background.

Je comptais partir sur un background inteligent, mais je me suis rendu compte que je ne pouvais pas obtenir ce que je voulais exactement.

- Pour placer ma banniere, aucun problème, c'est du texte, rien à découper ou autre (seulement un logo)

- Pour la frame en transparence, normalement pas de propblème non plus j'utiliserais le rgba pour obtenir ce que je désire.

- Par contre, pour les deux " éléments du site ", ce sont en fait des images réalisées sous photoshop, à qui j'ai ajouté des effets en fonction de mon background (ce qui signifie que, si je retire mon background pour faire des découpes, je n'aurais plus du tout le resultat visuel que je désire)

S'il était possible de me donner votre avis, j'apprécierais grandement car je suis actuellement bloqué la dessus, et je ne vois pas reellement de solutions.

D'avance, merci.

Très cordialement,
Modifié par Bingbing (25 Jun 2012 - 20:49)

hello !

Ca va ètre assez difficile de commenter une maquette "grossière", aussi, mes remarques resterons générales.
Première chose que je remarque avec ta maquette, l'absence de grille. -> http://960.gs/

D'autre part, "éléments du site", ca veut tout et ne rien dire ...
Mais de ce que j'ai pu tester, placer des éléments en fonction d'un BG intelligent, ca va ètre bien compliqué quand même quand tu vas tester les différente résolution (la ou se présente donc l’intérêt du dit background intelligent.)

a écrit :
- Par contre, pour les deux " éléments du site ", ce sont en fait des images réalisées sous photoshop, à qui j'ai ajouté des effets en fonction de mon background (ce qui signifie que, si je retire mon background pour faire des découpes, je n'aurais plus du tout le resultat visuel que je désire)

Là j'avoue ne pas avoir compris. Tu veux dire des effets de fusion sous photoshop ?

Bonjour,

Tout d'abord merci d'avoir répondu.

Je vais tâcher d'être plus clair :

Actuellement, ma maquette se compose d'un background (une sorte de degradé)

Puis, sur cette maquette, j'ai déposé des " images " que j'ai " découpé " moi même, que j'ai ensuite intégré à ma maquette (tout se passe sur photoshop)

Donc pour résumer, je comptais partir sur un background intelligent, mais se sera impossible d'obtenir le résultat désiré.

Donc ma question est : Comment pourrais-je procéder à la découpe de ma maquette ?

- je souhaite conserver ce background, qui sera visible sur toute la page

- Par contre, toujours concernant le " design " de mon site internet (exemple, un bureau que j'ai découpé, que j'ai collé sur ce même background puis appliqué des options de fusion dessus) comment faire pour implanter ceci dans mon site internet, en conservant uniquement ma découpe mais avec les options de fusion de mon background ?

Pour être encore plus précis, disons que si je retire mon background et conserve mon objet, il sera de couleur marron, alors que si je laisse afficher mon background, il sera de couleur rouge (c'est simplement un exemple grossier,juste histoire d'être le plus clair possible)

Pour résumer, la chose que je désire faire, c'est de pouvoir utiliser " mes découpes " en conservant tous mes effets de fusions (sachant que je ne parle pas ici d'un simple carre ou rectangle, mais une découpe assez complexe pour que celui si se fonde parfaitement dans mon background)

j'espère avoir été assez clair.

Merci encore.

Très cordialement,
Modifié par Bingbing (26 Jun 2012 - 17:48)

Si on pouvait voir la vraie maquette ça serait pas de refus. Parce que là j'ai vraiment du mal à visualiser ce que tu veux faire.

@jb_gfx
apparement ce serait des objets a extraire en png avec ou sans ombrage.

Je ne comprend pas non plus le problème, qui , à mon avis serait gérable en png avec une opacité plus ou moins marqué ici ou là.

++

Bonsoir,

Voici un exemple :

- ceci est mon background intelligent.

http://img15.hostingpics.net/pics/247266background.jpg

- Ceci est l'image que je veux obtenir pour ma page internet (option de fusion, luminosity 70%)

http://img15.hostingpics.net/pics/767542luminosity70.jpg

- et ceci, est mon image découpée (sans option de fusion, luminosity 70%)

http://img15.hostingpics.net/pics/165295none.jpg


- Pour résumer, je veux que ma page internet dispose du background que j'ai mis plus haut, que l'objet " bureau " puisse être placé en css sur ma page MAIS qu'il puisse conserver le rendu de la photo 2, c'est à dire avec l'option de fusion, luminosity 70%

- Quand à l'image 3 (le bureau sans option de fusion), actuellement, je peux placer cet objet sur ma page internet, mais comment faire pour placer un objet à qui j'ai ajouté une luminosity 70 % (photo 2) ?

(Ce ne sont que des exemples basiques, pour pouvoir vous montrer du mieux possible mon problème).

Car j'ai cette même question pour à peu prêt la totalité de mon design :

Autre exemple, mon menu, j'ai fait des boutons à partir d'un estompage sur photoshop Voici un exemple rapide (on peux voir que ces boutons se fondent parfaitement avec le background) :

http://img15.hostingpics.net/pics/247328bouton01.jpg

Mais le problème, c'est que si je veux utiliser ces boutons pour qu'ils concordent parfaitement avec mon background (vu que j'utilise un background intelligent, les résolutions différentes ne me permettront pas d'obtenir un résultat parfait, et j'obtiendrais alors ceci)

http://img15.hostingpics.net/pics/613273bouton02.jpg

Un bouton, qui portera cette fois ci l'apparence de mon background, mais vu que j'aurais découpée celle ci sous photoshop en " fixe " elle ne se fondera plus dans mon background.

J'espère avoir été assez clair cette fois ci, excusez moi encore, mais pas facile d'expliquer ce que j'aimerais pouvoir réaliser.

Une fois de plus, merci à tous.

Très cordialement,
Modifié par Bingbing (26 Jun 2012 - 18:57)

Bon ben on va t’éviter de perdre du temps pour rien : les modes de fusion de photoshop et autres softs de manipulation d'image, c'est pas possible simplement en HTML et CSS.

Le seul mode disponible est la transparence simple.
Modifié par jb_gfx (26 Jun 2012 - 18:57)

Bonsoir,

Donc comment puis je faire pour obtenir un résultat similaire ?

Sur l'image par exemple, est ce possible de " détourer à la plume " mon " background " en forme de bureau pour ainsi conserver tout se rendu et enregistrer le tout en jpeg ?

Par contre, comment faire pour obtenir des boutons qui puisse se fondres dans mon background, est ce possible de tout simplement faire des " contours " et laisser le milieu du boutons en transparence ?

Encore merci pour tout,

Très cordialement,

Bingbing a écrit :
Bonsoir,
Par contre, comment faire pour obtenir des boutons qui puisse se fondres dans mon background, est ce possible de tout simplement faire des " contours " et laisser le milieu du boutons en transparence ?

C'est a ca que je pensait effectivement, il va faloir gérer avec des border.

Bingbing a écrit :

Sur l'image par exemple, est ce possible de " détourer à la plume " mon " background " en forme de bureau pour ainsi conserver tout se rendu et enregistrer le tout en jpeg ?

Je te conseil effectivement de détourer correctement ta table, et de l'exporté en png, pas en jpeg. Tu verra alors en transparence ton background.
Tu vas aussi pouvoir faire varier l'opacité de ton image en CSS, l'effet ne serra pas strictement identique a photoshop, tu peux faire une croix sur les options de fusion.

Ce que je te propose alors sous photoshop, pour conserver tes options de fusion : sur ta première image de ta table avec option de fusion, tu aplatie ton fichier, ensuite tu détoure ta table, tu exporte encore une fois en png. ca donnerai quelque chose comme :



L'illusion devrai marcher

Bonsoir,

j'ai réussi à obtenir ce que je voulais.

Un grand merci à tous, et merci pour cette astuce.

Très cordialement,