Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Graphisme > Photoshop > Réaliser un design SteamErsatz > Lecture des commentaires

Réaliser un design SteamErsatz

Vous devez être inscrit pour pouvoir poster des messages

Page : 1  2  Suivante
Pseudo Commentaire
Page : 1  2  Suivante
Hors ligne heRz3leiD # Posté le 10/12/2005 à 13:37:04 - Ce membre n'a pas mis de note
Avatar
Groupe : Membres
 Tutorial sympa, dommage pour l'aliasing sur les bords du cadre !
Image utilisateur
 
Hors ligne Chahine # Posté le 10/12/2005 à 14:21:15 - Ce membre n'a pas mis de note
Avatar
Groupe : Membres
 J'en connais un qui va hurler :-° !
>> J'ai nommé neoxx78 !
Hors ligne El Konkonbré M@squed # Posté le 11/12/2005 à 01:40:41 - Ce membre n'a pas mis de note
Avatar
Groupe : Membres
 Salut et merci pour les com's.

Pour ce qui est de l'Aliasing, c'est voulu, sinon je n'aurais pas dit de décocher la case lissé.

Si IE7 était déjà sur le marché et utilisé par tous les ex-utilisateurs de IE6, j'aurais préconisé le PNG, et là, plus d'aliasing et une transparence de bordure parfaite.

J'aurais aussi pu expliquer, qu'une technique pour ne pas avoir d'aliasing en .gif, était de sélectionner : avec détourage en mettant la couleur de Back-ground, au moment de la sauvegarde.

Ou ne pas avoir de transparent en arrière-plan de l'interface au moment de sa confection, mais de mettre la couleur du back-ground du site.

Mais dans le cas présent, tu chipotes sur l'aliasing, parce que si tu vas faire un tour sur mon site et que tu mets le "Thème" -> SteamErsatz, tu as vraiment l'oeil perçant pour le voir.

Salut.
-J'ai peu de connaissances en grand chose, mais j'ai énormément de connaissances en rien.
-Tout problème, a sa solution, et s'il n'y a pas de solution, alors c'est qu'il n'y a pas de problème :)
-Adoptez un petit Pifou, soyez généreux :)
 
Hors ligne Sorgue # Posté le 12/12/2005 à 14:45:55 - Ce membre a mis la note : 20
Ces citations à la con
Avatar
Groupe : Membres
 Waw, tout bon tutorial jamais vu ça, complet, net, clair, sans fautes d'ortho (ou presque, certeS) je mets 20 parce que franchement il les vaut !!!
Hors ligne Tantan # Posté le 12/12/2005 à 16:42:53 - Ce membre a mis la note : 17
Avatar
Groupe : Membres
 Bien, Tres tres bon tuto coté photoshop. Coté html c'est heu tres confu on va dire pas tout compris.

Ce que j'aime bien dans ce tutot c'est les images qui sont tres démonstrative!


17/20
Hors ligne Anonyme # Posté le 12/12/2005 à 18:16:11 - Ce membre n'a pas mis de note
Groupe :
Bravo, très bon tutorial :)
Pourquoi ne pas proposer un design SDZ à la steam comme celui de la page exemple ?
Hors ligne Hikapa # Posté le 20/12/2005 à 11:01:42 - Ce membre a mis la note : 20
The Who, Bowie & Daft Punk
Avatar
Groupe : Membres
 Très bien 20/20 (pour faire remonter le zero) mais dans l'exemple de ton site il y a une image qui marche pas mais sur le livre d'or ca marche

Y'aurait une possibilité de le faire qu'avec des divs ?
Image utilisateur

Je peux aider les gens dans leur projet pour la validation XHTML et l'orthographe, contactez-moi.
Vous savez que vous êtes geek quand vous avez réussi un triple boot.
 
Hors ligne dagodile # Posté le 21/12/2005 à 10:55:55 - Ce membre a mis la note : 19
Avatar
Groupe : Membres
 Génial moi qui cherchait justement un design pour mon site

si on change les couleurs ca donne super bien (avec tes couleurs aussi)

Sinon bravo pour le tuto
Image utilisateur
 
Hors ligne albundy # Posté le 21/12/2005 à 21:11:33 - Ce membre a mis la note : 18
Avatar
Groupe : Membres
 salut franchement quand ont est logique ont peut pas mettre un 20 car en dessin graphisme ou autre la perfection n exite pas car ont peut toujour faire mieux mais en tous cas ton tuto est clair donc je te mets avec joie un 18/20 :D
et je te met en plus ce que j ai fait grace a toi<lien url="http://perso.wanadoo.fr/sinsezero/"></lien>

et je pense qu il serait sympa de mettre nos resultat
en tous cas encore merci a toi et Image utilisateur
N oubliez pas de marquer comme resolue quand votre probleme et resolue

 
Hors ligne Grippy # Posté le 22/12/2005 à 12:53:57 - Ce membre n'a pas mis de note
Groupe : Membres
 Bonjour,

J'ai un petit problème au moment du découpage en 15 images sous Image ready, je n'ai pas la fenêtre "Contenu Web" dans mon plan de travail, et si je cherche a la mettre en cliquant dans l'onglet "fenêtre" je ne vois aucun "Contenu Web" o_O

Merci
Hors ligne blind # Posté le 26/12/2005 à 16:21:30 - Ce membre a mis la note : 18
Groupe : Membres
 vraiment super, bravo, digne d'un comcombre masqué !
Hors ligne Tibrus # Posté le 27/12/2005 à 18:11:53 - Ce membre a mis la note : 19
TGV A rame 325 482,4 Km/h
Avatar
Groupe : Membres
 Bonjour,

Super la partie sur la création du design. Je chipoterais en indiquant que Photoshop est payant. Donc à quand le même tuto avexc Gimp par exemple. S'il permet de faire cela biensur.

Ensuite la partie Html est un peu brute de fonderie mais je pense que ce n'est pas l'objet du tuto. Donc après a nous de nous pencher dessus pour bien comprendre.

Je mets un 19/20

JP
Quand la cervelle échoue, la force brute reprend ses droits
Image utilisateur Born to be root
 
Hors ligne H_aldnoer # Posté le 12/01/2006 à 22:16:35 - Ce membre n'a pas mis de note
Avatar
Groupe : Membres
 Bonsoir,

il y a quelque chose que je ne comprend pas :
c'est la signification de ceci
Code : CSS
.table_fx_div { width: 400px; border-collapse: collapse; }
.table_fx_div td { padding: 0px; }


Pouvez vous m'éclairez ?
Citation
Merci Zizou
 
Hors ligne lift # Posté le 07/02/2006 à 12:23:58 - Ce membre a mis la note : 14
tout ne sert a rien
Groupe : Membres
 bon...pas terrible: design à tableaux.

moi-meme j'ai reussi a faire le meme avec des <div> en m'inspirant de ce tuto. :-°
et voila le code(exemple):
Code : HTML

<html>
<head>
<style type="text/css">
.cadre
{
/* à vous de voir les propriétés à y mettre */
width : 50% ; /* par exemple */
}

.haut_1
{
background : url("images/hg.gif") bottom left no-repeat ;
padding-left: 18px ;
}

.haut_2
{
background : url("images/hd.gif") bottom right no-repeat ;
padding-right: 18px ;
}

.haut
{
background : url("images/hm.gif") bottom center repeat-x ;
width : 100% ;
padding-top : 18px ;
/* On met un padding-top ou un padding-bottom dans la balise "la plus imbriquée", celle qui est le plus à l'intérieur comme ça les autres div qui contiennent celle-ci seront redimmensionnées automatiquement et on vera les cadres
Notez que dans une version antérieur de ce tutorial j'utilisait l'attribut height mais je me suis rendu compte que ça créait des problèmes, notament sous Internet Explorer, je sais pas pourquoi :-S  */
}


.contenu_1_H
{
background : url("images/mhg.gif") left repeat-y ;
padding-left: 18px ;
/* Pour que toute la place disponible soit utilisée (sinon il y a des bugs si on met un <h1> à l'intérieur par exemple), allez pas me demander pourquoi  */
}

.contenu_2_H
{
background : url("images/mhd.gif") right repeat-y ;
padding-right: 18px ;
height : auto ;
}

.contenu_H
{
background : #1552ad ;
color : white ;
width : 100% ;
}

.contenu_1_B
{
background:url("images/mbg.gif") left repeat-y;
padding-left:18px;
height:auto;
}

.contenu_2_B
{
background:url("images/mbd.gif") right repeat-y;
padding-right:18px;
height:auto;
}

.contenu_B
{
background : #4188ac ;
color : white ;
width : 100% ;
}

.milieu_1
{
background : url("images/mg.gif") bottom left no-repeat ;
padding-left: 18px ;
}

.milieu_2
{
background : url("images/md.gif") bottom right no-repeat ;
padding-right: 18px ;
}

.milieu
{
background : url("images/mm.gif") bottom center repeat-x ;
width : 100% ;
padding-bottom: 18px;
padding-top: 10px;
}


.bas_1
{
background : url("images/bg.gif") top left no-repeat ;
padding-left: 18px ;
}

.bas_2
{
background : url("images/bd.gif") top right no-repeat ;
padding-right: 18px;
}

.bas
{
background: url("images/bm.gif") top center repeat-x ;
width: 100%;
padding-top:18px;
}
</style>
</head>
<body>
<div class="cadre">

        <div class="haut_1">
                <div class="haut_2">
                        <div class="haut">
                        </div>
                </div>
        </div>
       
       
        <div class="contenu_1_H">
                <div class="contenu_2_H">
                        <div class="contenu_H">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi interdum fermentum velit. Nunc leo. Maecenas purus arcu, dapibus at, consequat sit amet, convallis nec, dui. Vestibulum quis tortor. Nam non neque at eros molestie rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi interdum fermentum velit. Nunc leo. Maecenas purus arcu, dapibus at, consequat sit amet, convallis nec, dui. Vestibulum quis tortor. Nam non neque at eros molestie rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<!-- ici l'entete -->
                        </div>
                </div>
        </div>
       
       
        <div class="milieu_1">
                <div class="milieu_2">
                        <div class="milieu">
                        </div>
                </div>
        </div>
       
        <div class="contenu_1_B">
                <div class="contenu_2_B">
                        <div class="contenu_B">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi interdum fermentum velit. Nunc leo. Maecenas purus arcu, dapibus at, consequat sit amet, convallis nec, dui. Vestibulum quis tortor. Nam non neque at eros molestie rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi interdum fermentum velit. Nunc leo. Maecenas purus arcu, dapibus at, consequat sit amet, convallis nec, dui. Vestibulum quis tortor. Nam non neque at eros molestie rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi interdum fermentum velit. Nunc leo. Maecenas purus arcu, dapibus at, consequat sit amet, convallis nec, dui. Vestibulum quis tortor. Nam non neque at eros molestie rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                        <!-- ici le contenu -->
                        </div>
                </div>
        </div>
       
        <div class="bas_1">
                <div class="bas_2">
                        <div class="bas">
                        </div>
                </div>
        </div>
</div>
</body>
</html>


avec des images de 18x18, 2x18, 2x30, 30x18... ;)
(je me demande si je ne devrais pas faire un tuto la dessus... :D )

boh allez! un 14/20 pour l'effort et parce que ca marche.
"qui n'a jamais fait une cuite ne comprendras sans doute jamais un alcoolique"
lays farra
 
Hors ligne colibri # Posté le 20/02/2006 à 15:43:07 - Ce membre a mis la note : 15
alergeek
Avatar
Groupe : Membres
 Avec 7 neuronnes ça m'etonnerais beaucoup que tu soit surdoué ;) (t'en fais pas, je rigole :D )
allez je met 15/20.
Image utilisateur
 
Hors ligne bly # Posté le 06/04/2006 à 13:55:21 - Ce membre a mis la note : 16
Groupe : Membres
 Bon tuto pour le design... :)
la partie code un peu compliqué pour moi...(vu que j'y connais rien) :(
pareil je me suis inspiré du tutoriel cité plus haut...
Hors ligne ~0r!on~ # Posté le 15/04/2006 à 13:33:20 - Ce membre a mis la note : 15
Groupe : Membres
 super sympa, le codage est ce qu'il est mais ca vaut quand meme un 15
Hors ligne Anonyme # Posté le 20/04/2006 à 11:12:56 - Ce membre n'a pas mis de note
Groupe :
sympa j'aprécie
Hors ligne gonan # Posté le 02/05/2006 à 22:00:58 - Ce membre a mis la note : 19
Avatar
Groupe : Membres
 Moi qui cherchait a faire un beau design pour mon site web, j'ai trouvé(euh en changeant les couleurs bien sur)
Ne cliquez pas ici, car il n'y a pas de lien :p

Image utilisateur
 
Hors ligne zoupoutourou # Posté le 04/05/2006 à 20:01:58 - Ce membre a mis la note : 15
carpe diem
Avatar
Groupe : Membres
 Super sympa ^^ ... le code l'est moins :lol: MAIS BRAVO QUAND MÊME ! :)
Secret (cliquez pour afficher)
Google est ton ami ! :)
 
Hors ligne Sibtcha # Posté le 04/06/2006 à 23:40:39 - Ce membre a mis la note : 16
ubuntu lover
Groupe : Membres
 Très bon tuto, je regrette juste que ce soit avec des tableaux.

Je l'ai réalisé sur mon site (avec les tableaux) et maintenant je suis en train de tout refaire le site et je reprends ta méthode mais je fais avec des divs.

Merci encore
Être le second revient à être le premier des perdants
Tirez-en les conclusions ;)
 
Hors ligne Kryzstof # Posté le 17/06/2006 à 20:27:18 - Ce membre a mis la note : 14
Feel the ]FORCE[
Avatar
Groupe : Membres
 Côté Totoshop très bien réalisé mais côté code c'est un peu en bordel et pas très clair alors je te met un 14 ;)
Rap - Game Over - Médine

Game Over !


Médine.
 
Hors ligne try0003 # Posté le 20/06/2006 à 08:42:16 - Ce membre a mis la note : 18
pas de neige aux Québec !
Groupe : Membres
 ouia merci inféniment c'est toi qui ma donné la picure pour le photoshop et depuit que j'ai lus ton tuto il y a 3 mois je crois je nais pas arreter d'en faire et depuit je m'amilliore de jour en jour ;) merci encore elcocombré masqué qui que tu peut etre :D :lol: :lol:
Hors ligne Shadow_F # Posté le 18/07/2006 à 18:29:03 - Ce membre a mis la note : 19
Avatar
Groupe : Membres
 Génial côté pédagogique (plein de choses diverses qui servent en général partout et pas seulement pour faire des design). Côté rendu c'est pas la perfection MAIS c'est propre, c'est pas fait à l'arrache, c'est pas un tuto qui n'est qu'une suite d'effets et de filtres prédéfinis.

C'est un TUTO, ni trop pourri, ni trop sophistiqué mais peu peuvent se vanter d'avoir créé un vrai tuto.

| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |

EDIT : Là en retourant à la liste des tutoriaux je me suis aperçu que ce tutorial n'a pas été très apprécié et je trouve abérant de voir que ce tuto n'a que 15 de moyenne alors que d'autres qui ont plus 16 sont soit horribles, soit inutiles (voire même les deux).
Je rappelle aussi que nous sommes dans la catégorie DESIGN, ce n'est pas tout à fait la même chose que GRAPHISME, donc ici on parle de design (comme dans ce tuto) mais pas de chose qui s'éloignent trop.
Hors ligne iansus # Posté le 22/07/2006 à 09:33:06 - Ce membre a mis la note : 20
J'adore la PHPilosophie !!!
Avatar
Groupe : Membres
 Merci ton design va beaucoup me servir pour mon site

Je ne l'ai pas encore utilisé mais ça va donner sur Mon site
Image utilisateur
 
Hors ligne Sibtcha # Posté le 09/08/2006 à 20:23:12 - Ce membre a mis la note : 16
ubuntu lover
Groupe : Membres
 Très bon tuto, surtout depuis la modification en remplaçant les tableaux par des divs. Je te met 19 pour remonter la moyenne ca en vaut la peine.
Être le second revient à être le premier des perdants
Tirez-en les conclusions ;)
 
Hors ligne SubX # Posté le 20/08/2006 à 23:18:45 - Ce membre a mis la note : 18
Modelisateur amateur
Avatar
Groupe : Membres
 la partie du tuto ou on travaille avec photoshop et imagesready est bien mais le code html de la fin est complexe bourré de div, etc... ceci dit exellent tuto : 18/20
Mon site
Image utilisateurEven if you're not with me I'm with you

Pour toute demande d'engagement dans un projet (quel qu'il soit), la reponse est non, jusqu'au changement de cette phrase ;)
 
Hors ligne The $n@k3 # Posté le 04/09/2006 à 01:40:36 - Ce membre a mis la note : 19
Avatar
Groupe : Membres
 Bravo Bravo !!!!
Sa c'est du boulot !! ;)
Hors ligne super_g # Posté le 26/09/2006 à 22:18:06 - Ce membre a mis la note : 19
roller powaaaa!!!
Groupe : Membres
 tres bon tuto, je te met 19 ;)
un générateur que j'ai crée avec : www.bind-source.fr
Image utilisateur
 
Hors ligne PiD # Posté le 08/11/2006 à 19:46:58 - Ce membre n'a pas mis de note
C4D Rules !
Avatar
Groupe : Membres
 moi, le resultat final bug :(

j'ai une gros bloque blanc en plein millieu de mon design :(

mais bon, comme j'ai appris plein de chose, je vais mettre 15/20 ;)
Image utilisateur
WoWeur no-life à temps plein !
 

Vous devez être inscrit pour pouvoir poster des messages

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news
Édité par Simple IT SARL : Nous contacter | Notre blog | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 228 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.0345s (0.0216s)