Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1533 connectés 

  FORUM HardWare.fr
  Graphisme
  Web design

  Boutons sur apple.com

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Boutons sur apple.com

n°1076557
igarimasho
Posté le 22-08-2009 à 17:27:21  profilanswer
 

Quelqu'un sait comment sont fait les boutons qu'on trouve sur le site d'apple? Je trouve qu'ils ont la classe tout en restant ultra sobre:
http://images.apple.com/macosx/images/notifyme_btn20090608.png
 
J'arrive à rien de bien probant  :(

mood
Publicité
Posté le 22-08-2009 à 17:27:21  profilanswer
 

n°1076599
kiwi7756
Posté le 22-08-2009 à 23:38:14  profilanswer
 

C'est un simple dégradé non?


---------------
portfolio
n°1076603
charrelu
Posté le 23-08-2009 à 02:26:52  profilanswer
 
n°1076610
igarimasho
Posté le 23-08-2009 à 10:20:49  profilanswer
 

kiwi7756 a écrit :

C'est un simple dégradé non?


Y'a un dégradé, mais c'est pas tout:
 
- Drop shadow autour du bouton
- Texte avec inner et/ou drop shadow
- Dégradé dans le bouton, avec du gris ça va, mais avec des couleurs ça a vite faite de ressembler à un playmobil
- et ce qui fait toute la différence: un highlight blanc qui fait le contour intérieur haut du bouton et s'estompe progressivement, et là j'en chie
 

charrelu a écrit :

J'ai trouvé quelques tutos (photoshop) :


Merci, mais ces tutos sont insuffisant car ils passent à côté de ce qui fait la beauté du bouton, et ils zappent totalement la fonte utilisée qui est super importante, avec du arial c'est moche par exemple

Message cité 1 fois
Message édité par igarimasho le 23-08-2009 à 10:25:53
n°1076611
charrelu
Posté le 23-08-2009 à 10:30:04  profilanswer
 

Si tu trouve dis moi, ça m'intéresse.


---------------
Mon Feed-Back HFR
n°1076615
Skopos
Titilleur de nombrils...
Posté le 23-08-2009 à 11:19:34  profilanswer
 

igarimasho a écrit :


- et ce qui fait toute la différence: un highlight blanc qui fait le contour intérieur haut du bouton et s'estompe progressivement, et là j'en chie
 


En dupliquant la forme de base et en créant un décalage vertical ça devrait le faire.

igarimasho a écrit :


Merci, mais ces tutos sont insuffisant car ils passent à côté de ce qui fait la beauté du bouton, et ils zappent totalement la fonte utilisée qui est super importante, avec du arial c'est moche par exemple


Pour la typo tu cherches et tu testes :D

n°1076645
abais
Posté le 24-08-2009 à 09:22:44  profilanswer
 

Salut, en bidouillant un peu Toshop, j'obtiens ce résultat :
 
http://urfman.free.fr/fhw/btnApercu.png
 
Pour ce faire, ma forme a ces effets:
 
http://urfman.free.fr/fhw/macStyle.png
 
Pour le texte, c'est la police Myriad pro (celle d'Apple) mais un verdana donne quelque chose de pas mal aussi...
Le texte est blanc et je lui met un drop shadow très léger (mode produit, 20% en opacité, 90°, 1px de distance et 2px en taille, le reste je n'y ai pas touché)


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1076654
igarimasho
Posté le 24-08-2009 à 10:50:16  profilanswer
 

:ouch: Bluffé.
 
Avec tes réglages je n'arrive pas à avoir le même effet du stroke. Mon highlight blanc est sur le bord alors que pour toi on dirait qu'il il y a un pixel gris entre lui et le bord.

n°1076655
abais
Posté le 24-08-2009 à 10:56:31  profilanswer
 

c'est un contour interne (position = Inside) et non externe ;)
(le "pixel gris" correspond à l'ombre portée)


Message édité par abais le 24-08-2009 à 10:57:32

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1076659
igarimasho
Posté le 24-08-2009 à 12:18:51  profilanswer
 

J'ai bien mis en inside. En fait j'ai changé la couleur de mon fond en tout blanc et cette fois je vois bien  le stroke et la bordure grise. Par contre ce qui est moche c'est la partie horizontale du stroke ça me fait une ligne blanche qui contraste trop avec le bouton alors qu'avec toi le stroke est très léger et un peu flou. C'est la compression web qui fait ça?

mood
Publicité
Posté le 24-08-2009 à 12:18:51  profilanswer
 

n°1076660
abais
Posté le 24-08-2009 à 12:22:39  profilanswer
 

Le PSD zippé :
http://urfman.free.fr/fhw/macStyle.zip


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1076663
igarimasho
Posté le 24-08-2009 à 13:05:51  profilanswer
 

C'est gentil ça merci :)
 
Voilà le résultat que j'ai en copiant ta méthode:
http://img229.imageshack.us/img229/3738/boutonmoche.png
C'est vilain ce trait blanc et bien net  :(  
 
En fait quand je prends ton psd et que j'agrandis un peu ton bouton, le trait blanc devient bien net comme le mien et j'ai remarqué que ton gris était un peu plus clair ce qui atténue l'effet.

Message cité 1 fois
Message édité par igarimasho le 24-08-2009 à 13:06:11
n°1076668
abais
Posté le 24-08-2009 à 16:57:42  profilanswer
 

igarimasho a écrit :

C'est vilain ce trait blanc et bien net  :(

C'est pourtant fidèle à ton reglage, c'est à toi de mettre les bonnes couleurs :o


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°1076705
genghis77
-_-'
Posté le 24-08-2009 à 23:54:51  profilanswer
 

cet effet blanc c'est le biseautage estampage non?
suffit de regler la taille je crois


---------------
Genghis achat/vente
n°1076710
abais
Posté le 25-08-2009 à 09:22:44  profilanswer
 

genghis77 a écrit :

cet effet blanc c'est le biseautage estampage non?
suffit de regler la taille je crois


j'avais essayé mais pas moyen de n'avoir qu'un pixel de large...


Message édité par abais le 25-08-2009 à 09:23:07

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Graphisme
  Web design

  Boutons sur apple.com

 

Sujets relatifs
[flash]problème de boutons recalcitrants besoin d'aide pour ciblagefaire des boutons design ?
comment disposer des boutons flash sous forme d'un cerclePhotoshop - boutons aligement grisés
[RECH] Logiciel de création de boutons dont j'ai oublié le nom ^^Création boutons web 2... critique
Probleme contours boutons flashGalerie de boutons style "windows" tout faits ?
logiciel pour creation de boutons et bannièresQuelqu un peut il m expliquer comment faire ce genre de boutons apple
Plus de sujets relatifs à : Boutons sur apple.com


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR