[PRO] www.bluebox-chartres.com

(reprise du message précédent)

+1 pour les remarque de STOp

pika28 a écrit :

Complétement d'accord mais je suis vraiment naze avec photoshop, tu le gère à quel moment ton anti-aliasing?

Si les claques des noms des logos sont des calques texte, ça se gère dans la barre d'option (en haut) de l'outil Texte, tu ne dois pas avoir l'aliasing qui pointe sur "Sans".
Sinon l'anti-anliasing est géré naturellement par Photoshop.
Comment tu t'en est pris pour obteniur cette image (à partir du JPEG ou d'une source brute)?
Modifié par Hermann (21 Nov 2009 - 14:31)

Hello,

Hermann a écrit :
+1 pour les remarque de STOp

Si les claques des noms des logos sont des calques texte, ça se gère dans la barre d'option (en haut) de l'outil Texte, tu ne dois pas avoir l'aliasing qui pointe sur "Sans".
Sinon l'anti-anliasing est géré naturellement par Photoshop.
Comment tu t'en est pris pour obteniur cette image (à partir du JPEG ou d'une source brute)?

Je rajouterai également une petite précision pour Pika28 à propos des formats d'images et de leurs utilisations dans leurs généralités :
* le jpeg est à utiliser pour afficher des photos
* le gif et le png sont à utiliser pour afficher des graphiques simples, logos, statistiques, etc.

Pour résumer mon propos :
si nombre de couleurs de l'image est supérieur à 256 = jpg
sinon gif ou png.

Ceci n'est pas à prendre au pied de la lettre. Cependant, c'est une notion relativement à prendre en considération pour le poids total de la page (donc vitesse de transfert des données).

Le poids d'une image dépend de deux critères :
* dimensions(largeur, hauteur)
* nombre de couleur affichées

ex : une image de 300x300 px avec un aplat bleu et un carré rose au milieu (2 couleurs donc) :
jpeg = plus de 7 ko
gif = moins de 1 ko

Pour fondre un gif ou un png dans une mise en page : laisser un détourage de 1 px avec la couleur du fond de l'endroit où tu veux le placer. Si tu as une pattern, tu prends la dominante.

photoshop :
* menu fichier/enregistrer pour le web... (ctrl+shift+alt+s) ->après on a les doigts bien tordu
* choisir gif ou png et dans le champ détourage choisir sa couleur.

pika28 a écrit :
Je viens de tester avec IE Tester, les blocs sont centrés avec les version 5.5, 6 et 7. Ce qui exclu pour moi l'héritage du margin-left:auto et margin-right:auto du div id="divprin" puisque cette propriété de fonctionne pas avec IE5.5 et le texte est tout de même centré avec IE5.5....

Avec IE8 et FF3.5.5, les blocs se placent à droite...

Aujourd'hui, j'ai pas trop le temps de te déboguer. Cependant, sur ma version de FF (3.5.5), pas de réel soucis apparemment. (pages vues en mode rapide : accueil et solarium)

pika28 a écrit :
J'avance tout doucement, je suis en train de revoir page par page. Ca doit pas encore être parfait mais bon je dégrossi tout et retire les absolute tout doucement.

En effet, c'est mieux, mais il y a encore à faire. Je vois encore des absolue sur index-1,index-2, etc.

J'ai vu une petite chose qui m'a choquée. J'ai l'impression que le logo soltron est déformé.
1 Ce qui découle qu'il est crénelé
2 On ne déforme pas un logo

Personnellement, j'utilise les attributs width et height pour les éléments img. De mémoire, maintenant les browsers récupèrent les dimensions d'une image. En revanche, les anciens navigateur ne le font pas.

Pour finir et à propos de ton adresse au-dessus, la paire de tags <address></address> devrait être préconisée si je ne m'abuse. Par défaut, cet élément met ton texte en italique. Avec les autres propriétés que tu as mises, tu devras rajouter font-style:normal dans le cas d'une utilisation de l'élément « address ».

Bon WE à toi.
Modifié par Nolem (21 Nov 2009 - 16:12)

Bonsoir à tous,

Voilà je viens de terminer la nouvelle mise en page, visuellement identique mais sans aucun "position".

J'attends votre avis sur le code puis j'attaque le gros chapitre design

Design :

Le ciel, c'est moche c'est juste pour tripper.... Il me reste maintenant à :

- Définir la charte graphique
- revoir la page solariums qui est vraiment vilaine...
- revoir les logo (je part d'un jpg), donc je peux pas corrigé le crenelage ni l'anti-aliasing, je vais demander les fichier en EPS...
-revoir les effet de bord des photos et pourquoi un peu la mise en page...

Bonne soirée
Modifié par pika28 (22 Nov 2009 - 19:41)

Bonjour à tous,

Je voudrais ajouter le backgroud ci-dessous sur mon <div id="divprin">. Il fait 1000px x 1px, soit la même largeur que le div. Il contient 18 px de bord de chaque côté.

<div id="divprin"> contient :
#header { width:100%; height:150px; }
#menu { width:100%; height:44px; }
#contenu { width:100%; overflow:hidden;}
#footer { width:100%; font-size : 11px; }

Que me suggérez vous comme réglage pour prendre en compte les 18px du background de gauche et droite :
- Ajouter un padding : 0 18px 0 18px ?
- Réduire la largeur des blocs à 964px de largeur?
- autre...

[EDIT Laurie-Anne : Image trop grande] http://img134.imageshack.us/img134/2081/backgroundu.gif

Bonne journée
Modifié par Laurie-Anne (23 Nov 2009 - 10:52)

Bonjour,

La padding c'est très bien, et si tu décide de changer la largeur de ce div, tu n'auras pas à modifier tous ses enfants.

Et voila, j'ai utilisé le padding, j'ai pas ietester avec moi, si quelqu'un peut me dire ce que ça donne avec IE7 et IE8, je suis preneur

Que pensez vous de la modification design???

J'attaque les photos et le contour blanc...
Modifié par pika28 (31 Dec 2009 - 10:00)

Sur IE6 ça passe, donc ça doit également passer sur les deux autres.

Nolem a écrit :

photoshop :
* menu fichier/enregistrer pour le web... (ctrl+shift+alt+s) ->après on a les doigts bien tordu
* choisir gif ou png et dans le champ détourage choisir sa couleur.

J'ai beau regardé, je ne vois pas de champs détourage dans enregistrer pour le web...

Nolem a écrit :

* Tu récupères la sélection de ta photo (ctrl+clic gauche sur calque)

Je ne peux pas faire cette manip, je précise que je part d'un jpg sans calque. J'essai CTRL+A.

Nolem a écrit :

* menu sélection/modifier/dilater

Dilater agrandi la selection vers l'extérieur.

Nolem a écrit :

* choisir une valeur entre 5 et 10 px (suivant l'oeil)
-> Tu remarqueras que les coins « s'arrondissent » automatiquement.
* nouveau calque

calque normal, par couper, par copier?

Nolem a écrit :

* remplir le calque de blanc (maj+back-space)
* passer le calque en dessous
* effet de calque->ombre portée
* joindre les deux calques

Beaucoup de mal avec les fonctions photoshop
Modifié par pika28 (23 Nov 2009 - 14:46)

Salut tout le monde, je relance le sujet un ti peu.

- Voyez vous encore des améliorations à faire sur le XHTML/CSS ?

- Niveau design, j'ai ajouté un dégradé à gauche et à droite du div global, avez vous d'autres idées?

@ Nolem : Peux tu m'apporter quelques précision sur photoshop, voir post ci-dessus.

Merci

Hello,

Je n'avais pas vu que tu avais laissé d'autres messages.

pika28 a écrit :

@ Nolem : Peux tu m'apporter quelques précision sur photoshop, voir post ci-dessus.

pika28 a écrit :

[...]
J'ai beau regardé, je ne vois pas de champs détourage dans enregistrer pour le web...

http://img214.imageshack.us/img214/6796/pika28detourage.th.gif

pika28 a écrit :

Je ne peux pas faire cette manip, je précise que je part d'un jpg sans calque. J'essai CTRL+A.
[...]
Dilater agrandi la selection vers l'extérieur.

Je ne crois pas que ta méthode ne fonctionnera pas. Est ce que ton image est bord à bord ou est ce qu'il y a de l'espace autour (pseudo fond perdu) ?

* Tu récupères la sélection de ta photo (ctrl+clic gauche sur calque) :

http://img228.imageshack.us/img228/1811/pika28selectcalque.th.gif

À noter que :
PC -> ctrl+clic gauche sur calque
Apple ->pomme+clic gauche sur calque

En effet, dilater élargit la sélection. À l'inverse de contracter qui restreint la sélection. Et seulement la sélection. Cadre permet de faire une sélection sur les bords de ton objet. Cette sélection sera large de N pixels. C'est une fonction très pratique lorsque l'on veut faire du montage photo.

Nolem a écrit :

* remplir le calque de blanc (maj+back-space)

J'ai dû être bourré lorsque j'ai écrit cela. . Mieux vaut utiliser un calque de remplissage :
http://img514.imageshack.us/img514/7623/pika28remplissage.th.gif

Après si tu bloques, n'hésite pas à poser des questions. Mais je t'invite à les poser dans le bar. N'oublie pas que nous ne sommes pas dans un forum dédié au graphisme et techniques de tels ou tels logiciels.

Également, je voudrais mettre un point crucial au sujet de l'utilisation de toshop. Si tu n'as pas la licence, oublie le. Passe par GIMP. Là en exemple, tu peux faire la même chose avec. Sinon, si tu veux absolument toshop pour tel ou tel utilisation un peu spécifique et que tu veuilles travailler en production, tu as la possibilité d'acheter d'ancienne licence en occasion si ton budget est serré.

Il me semble t'avoir donné comme conseil d'utiliser l'élément « p » afin de rendre plus élégant ton document et un code plus juste :

<div class="textjustify" id="index-2">
	<h1>Votre centre de bronzage BlueBox Chartres</h1>
	<br>BlueBox est heureux de vous annoncer l'arrivée de son premier centre de bronzage UV en France. Revétu de bleu et de jaune, le centre de bronzage BlueBox Chartres propose les meilleurs solariums en matière de performances, de confort et de sécurité. 
	<br>Se ressourcer en prenant un bain de soleil rafraîchissant : il n'y a pas qu'en vacances que cela est possible!
	<br>Avec quelques séances UV correctement pratiquées, votre bronzage lors des expositions au soleil naturel ne sera que plus sur et bénéfique.
	<br>Vous trouverez sur le site de votre centre de bronzage bluebox chartres des conseils intéressants ainsi que des astuces importantes pour bronzer sans danger.
	<br>Les séances UV sont à partir de 5 € seulement.
</div>

À remplacer par :

<div class="textjustify" id="index-2">
	<h1>Votre centre de bronzage BlueBox Chartres</h1>
	<p>BlueBox est heureux de vous annoncer l'arrivée de son premier centre de bronzage UV en France. Revétu de bleu et de jaune, le centre de bronzage BlueBox Chartres propose les meilleurs solariums en matière de performances, de confort et de sécurité.</p> 
	<p>Se ressourcer en prenant un bain de soleil rafraîchissant : il n'y a pas qu'en vacances que cela est possible!</p> 
	<p>Avec quelques séances UV correctement pratiquées, votre bronzage lors des expositions au soleil naturel ne sera que plus sur et bénéfique.</p> 
	<p>Vous trouverez sur le site de votre centre de bronzage bluebox chartres des conseils intéressants ainsi que des astuces importantes pour bronzer sans danger.
	<p>Les séances UV sont à partir de 5 € seulement.</p> 
</div>

Le saut de ligne successif n'est pas bon. Il doit être utiliser avec parcimonie.

Au niveau de ta mise en page et de ta charte, je suis mitigé. Le bleu centrale (saturé) n'est pas en corrélation avec ton bleu extérieur (pastel) ce qui rend le visuel bizarre et agressif. couleurs pastelles ou saturées ?

Je trouve que ton ombre est trop prononcée (entre 30% et 50% d'opacité me semble largement suffisant).

Marquer d'un trait les bords de ton bloc central, je ne trouve pas vraiment très « jojo » également ou du moins pas aussi prononcé et pas un noir 100%. une couleur complémentaire ou une couleur analogue serait plus judicieux je pense.

Sache que la finesse est de mise. Souvent, les effets doivent être peu prononcés. C'est une multitudes d'effets qui font que...

bonne soirée à toi.
Modifié par Nolem (29 Nov 2009 - 01:13)

Bonjour à tous,

Voilà, après avoir lu et appliquer plusieur fois un big tuto photoshop de 350 pages, j'ai découvert quelques outils merveilleux, ce qu'était la plume, le vectoriel, masque de fusion et masque vectoriel, option de fusion, etc... que du bonheur...

J'ai modifié de nouveau le site...

Il me reste la page solariums à améliorer....

Encore merci à vous

PS : J'attends encore et encore plus de critique, je suis un peu fada maintenant !!!
Modifié par pika28 (31 Dec 2009 - 10:01)

Plop,

En vitesse :

pika38 a écrit :
Afin d’avoir un résultat optimal et qui dure dans le temps , il est impératif de faire des séances UV avec un intervalle de 3 jours maximum

Ne serait-ce pas plutôt "3 jours minimum" ? Ou alors modifier la phrase qui précède :

pika38 a écrit :
Afin d’avoir un mélanome malin avec un taux de métastase croissant, il est impératif de faire des séances UV avec un intervalle de 3 jours maximum

C'est bonus, c'est cadeau : http://www.who.int/mediacentre/factsheets/fs287/fr/index.html

Des clients qui visitent ton site, c'est bien.
Des clients qui reviennent dessus parce qu'ils ne sont pas morts, c'est mieux
Modifié par Akhilleus (08 Dec 2009 - 05:47)

Merci pour cet avis sur mon site. Pourrais tu me donner ton avis sur le design.
Modifié par pika28 (08 Dec 2009 - 09:40)

Bonjour,

Si tu ne sais pas voir la pique d'humour dans réponse d'Akhilleus, c'est ton problème. Ce n'est pas une raison pour t'énerver de la sorte...

En général, on est plus sensibles aux arguments des gens calmes et posé que des exités en colère...


Pour ce qui est de la suppression de post, la réponse est non.

HORS SUJET
Modifié par pika28 (08 Dec 2009 - 10:35)

Salut Pika,

Ma question était sérieuse, je me posais vraiment la question de savoir s'il ne s'agissait pas d'une erreur de ta part. Je ne souhaitais pas lancer une phrase en l'air pour te mettre hors de toi et je regrette que ce soit l'effet qu'elle ait eu.

pika38 a écrit :
je ne voudrais pas que les clients qui tape "*** ***" arrive sur mon site

Tu noteras que j'avais pris soin de ne pas utiliser ces mots, juste deux phrases d'humour qui succèdent au lien vers le rapport (trop optimiste) de l'OMS.

Ensuite, le site d'un centre de bronzage gagnerait justement en référencement en sensibilisant ses clients de manière informée sur les risques réels que représentent les rayons ultra-violets artificiels. En soulignant le fait que les tubes soient changés de manière régulière par exemple.

Prends contact avec un dermatologue et un chercheur en cancérologie, ils répondront à tes questions gratuitement et t'aideront certainement à rédiger une page dédiée informée.

* Concernant le référencement

- il est préférable d'utiliser des urls absolues
- un titre "h1" par page maximum
- une hiérarchie fournie des titres ça aide aussi (h1, h2, h3, ..)
- présence systématique de descriptions pertinentes dans le "alt" des images
- comme je le disais juste avant, du contenu, toujours du contenu, s'il est pertinent, c'est tout bénef pour toi
- éviter la redondance de contenu de page en page (en l'occurrence, les images en bas de page)

* Concernant l'ergonomie

Il est perturbant que les liens "Bronzage UV", "Blanchiment des dents" et "Esthétique" ne pointent sur rien. L'organisation générale du site pourrait être repensée pour réduire le nombre de pages superflues : je pense notamment à "présentation" et "voir la vidéo" pour "Blanchiment des dents", une page avec ces deux titres et le contenu des deux pages suffirait amplement.

Il faut garder à l'esprit pour ce genre de site qui se veut avant tout une vitrine pour un commerce existant hors d'Internet que le visiteur ne vient pas pour voir des pages mais pour trouver des informations, si l'organisation est approximative ou le nombre de page trop élevé, l'information est d'autant plus difficile à trouver.

* D'un point de vue esthétique

Je te conseille des arrondis de 6px au plus. Au delà, ça fait souvent déco cheap.

Les couleurs que tu utilises sont trop banales (il faut que le visiteur garde un souvenir unique de ton site web) :

http://omicronlab.net/upic/4b1e1b08-2061.png

L'association de couleurs n'étant pas une chose aisée, je te conseil d'aller faire un tour sur l'un de ces sites pour puiser l'inspiration :

- http://fr-fr.colourlovers.com
- http://colorschemedesigner.com

Tes anciennes versions versions n'étant malheureusement plus en ligne, je ne peux pas suivre précisément le chemin que tu as parcouru pour en arriver à la version actuelle mais à n'en pas douter, tu es sur la bonne voie

Edit : que dirais-tu de ceci par exemple

http://omicronlab.net/upic/4b1e2451-b25.png

ou

http://omicronlab.net/upic/4b1e2441-17a3.png ?
Modifié par Akhilleus (08 Dec 2009 - 11:47)

Akhilleus a écrit :
que dirais-tu de ceci par exemple

http://omicronlab.net/upic/4b1e2451-b25.png

ou

http://omicronlab.net/upic/4b1e2441-17a3.png ?

Petite précision, je suis sous enseigne et je dois respecter une charte graphique :
#006dd7 => bleu principal (environ 80%)
#FF9900 => orange (environ 20%)
#FFFFFF => La police en blanc

Je viens de modifier les arondis des photos

J'aurais bien vu un truc comme ça par exemple (5 minutes, coups de hache et de lance-pierre powered) :

http://omicronlab.net/upic/4b1e2caf-1a2.png
Cliquer pour agrandir
Modifié par Akhilleus (08 Dec 2009 - 18:02)

Salut,

Je réagis juste à quelque chose que tu répète pas mal. Tu dis avoir des couleurs imposées. D'accord, on en a toujours. Mais rien ne t'empêche d'en ajouter en complément pour les adoucir, enrichir. Les dégradés sont souvent une manière d'utiliser une couleur imposée tout en la détournant au profit d'une autre. Bref il faut faire de cette contrainte un avantage !

Même remarques que Mikachu qu'on t'avait déjà faites au départ, pense aux dégradés (légers de préférence)