Vous êtes perdu sur le forum ? Notre page d'accueil est là pour vous guider avec son menu rapide vers les principaux forums !
Vous ne vous souvenez plus d'une règle pour les clashs ou pour les commandes ? Notre page réunissant <a href="http://angels-design.forumactif.com/Les-regles-d-Angels-Design-h1.htm">toutes les règles du forum</a> est là pour vous aider !
Angels Design
Il est un lieu, perdu parmi les flots, une merveilleuse antre aux couleurs chatoyantes et aux colonnes indéfectibles... Angels Design. Il vous offre à vous, aventuriers, de multiples services à travers la maîtrise de l'art ancestral : le graphisme. Quelque soit votre dessein, les esprits créateurs et leurs disciples se dévoueront corps et âme pour qu'ensemble, l'impossible devienne possible. Angels Design est un forum d'entraide ouvert depuis quelques années. Notre but ? Accompagner nos membres dans la création de leur projet, proposer nos services de graphisme et bien plus encore... le tout, dans la bonne humeur et le partage !
Le forumCommandes graphiquestutos & ressourcesGaleries & WIPCoin PerduArchivesChatBox
Informations
# Le nouveau design d'Angels Design est terminé...

# N'hésitez pas à participer à la relance du forum...



 

Partagez | 
 

 Découpe

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Ange discret
Masculin
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
avatar
Flow57
Bonjour,

Est ce que quelqu'un saurait faire des découpes de design, pour les adapter en HTML/CSS ensuite ? :$

C'est urgent, car j'ai le design de ma newsletter à découper justement, pour l'utiliser dans quelques jours ...

Si quelqu'un peut m'aider je lui enverrai le design par MP :)

Merci d'avance ... Et bonne nuit =)
Revenir en haut Aller en bas
http://www.adoslife.fr
Admin
Féminin
Nombre de messages : 2606
Logiciel : Gimp - Inkscape
Réputation : 49
Points : 1010
Date d'inscription : 23/11/2007

Détails sur le membre
Logiciel principal: Gimp
Ma disponibilité: Dispo pour surveiller, pour grapher, faudra patienter...
Spécialités graphiques: Codeur
avatar
Norore
Salut, tout dépend de la façon dont tu veux qu'elle soit découpée, mais sans l'image, on aura du mal à te guider :) !





Merci Lilie Duciel !
Revenir en haut Aller en bas
http://img408.imageshack.us/g/norore.png/ http://www.nororedreams.fr/
Ange discret
Masculin
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
avatar
Flow57
Sorry ^^'

Donc le voici :

http://flow.jesuisopen.fr/images/newletter(1).jpg avec texte
et
http://flow.jesuisopen.fr/images/newletterst.jpg sans texte

:)

Edit : Je viens de voir que vous aviez une partie spéciale découpe / réalisation de kit, mais elle est fermée alors qu'elle est vide ... ce serai possible de déplacer le topic afin qu'éventuellement quelqu'un puisse m'apporter son aide ? :$


Dernière édition par Flow57 le Sam 30 Aoû 2008, 18:01, édité 1 fois (Raison : Ajout de l'edit pour pas créer de double post)
Revenir en haut Aller en bas
http://www.adoslife.fr
Ange discret
Masculin
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
avatar
Flow57
Je me permet d'upper, car c'est urgent et que vous êtes mon dernier recours, malgré mon edit qui était fait pour éviter le up ... =/
Revenir en haut Aller en bas
http://www.adoslife.fr
Admin
Féminin
Nombre de messages : 2606
Logiciel : Gimp - Inkscape
Réputation : 49
Points : 1010
Date d'inscription : 23/11/2007

Détails sur le membre
Logiciel principal: Gimp
Ma disponibilité: Dispo pour surveiller, pour grapher, faudra patienter...
Spécialités graphiques: Codeur
avatar
Norore
Mozilla Firefox me dit que ton site est un site contrefait, et même si je lui demande de faire une exception, je tombe sur lycos -_-' !

Edit : j'ai rien dit :languue: !
Pour ta découpe, il suffit de le couper en trois parties distinctes : l'en-tête, soit les crocos et ce qui ressemble à une barre de menu ; le corps, pour ça il te suffit de couper uniquement une hauteur d'1 pixel mais avec toute la largeuer ; et le bas, en prenant soin de bien prendre le croco qui est en transparence :^^: !





Merci Lilie Duciel !
Revenir en haut Aller en bas
http://img408.imageshack.us/g/norore.png/ http://www.nororedreams.fr/
Ange discret
Masculin
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
avatar
Flow57
C'est presque ce que j'avais déjà fait, mais niveau CSS, je suis encore une daube =/

-> http://www.walymag.com/divers/newsletter

:larmes:
Revenir en haut Aller en bas
http://www.adoslife.fr
Admin
Féminin
Nombre de messages : 2606
Logiciel : Gimp - Inkscape
Réputation : 49
Points : 1010
Date d'inscription : 23/11/2007

Détails sur le membre
Logiciel principal: Gimp
Ma disponibilité: Dispo pour surveiller, pour grapher, faudra patienter...
Spécialités graphiques: Codeur
avatar
Norore
Tu peux aussi couper le header en deux, afin de mettre les deux textes sur la même ligne et te servir de la commande float: (non|right|left); et faire ensuite un clear: both; pour l'image du corps :) !





Merci Lilie Duciel !
Revenir en haut Aller en bas
http://img408.imageshack.us/g/norore.png/ http://www.nororedreams.fr/
Ange discret
Masculin
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
avatar
Flow57
Pour l'image du corps, la mascotte ou le fond ?

Est ce que tu pourrais me le faire, si tu as un petit moment, ça ne devrait pas être trop compliqué pour toi ? :$ Car je dois m'en servir dans les jours qui viennent normalement ... =/
Et d'ici là que j'y arrive pas moi même ... =(

( Edit : Le premier lien marche, mais il faut le copier / coller dans la barre d'adresse, la parenthèse coupant le lien :bloancolere: )
Revenir en haut Aller en bas
http://www.adoslife.fr
Admin
Féminin
Nombre de messages : 2606
Logiciel : Gimp - Inkscape
Réputation : 49
Points : 1010
Date d'inscription : 23/11/2007

Détails sur le membre
Logiciel principal: Gimp
Ma disponibilité: Dispo pour surveiller, pour grapher, faudra patienter...
Spécialités graphiques: Codeur
avatar
Norore
L'image du corps = le fond.

Pour l'ensemble, voici un début de code de la façon dont je procéderais :

Code:
/* Définition de l'ensemble global de la page du contenu contenant les blocs */
#contenu
{background : /* le fond que tu veux (couleur ou image ou autre) */
width: /* largeur en pixel */;
height: auto;
margin: auto;}

/* Définition du bloc du haut qui devra contenir les deux images de l'en-tête collées l'une contre l'autre sur la même hauteur */
#bloc_haut
{width: /* largeur en pixel */;
height: /* hauteur en pixel */;

/* Le bloc de gauche de l'en-tête */
.bloc_haut_gauche
{background: url(/* le lien de ton morceau gauche d'en-tête */) no-repeat  /* avec une couleur pour remplacer l'image si le lien est mort*/;
float: left;
margin: auto;}

/* Le bloc de droite de l'en-tête */
.bloc_haut_droit
{background: url(/* le lien de ton morceau droit d'en-tête */) no-repeat  /* avec une couleur pour remplacer l'image si le lien est mort*/;
float: right;
margin: auto;}

/* Le bloc du contenu, l'image de fond qui fait 1 pixel de hauteur */
.bloc_milieu
{background: url(/* le lien de ton image de fond */) repeat-y  /* avec une couleur pour remplacer l'image si le lien est mort*/;
clear: both;
margin: auto;}

/* Le bloc du pied de page */
.bloc_bas
{background: url(/* le lien de ton pied de page */) no-repeat  /* avec une couleur pour remplacer l'image si le lien est mort*/;
margin : auto}

Avec cette architecture HTML :

Code:
<html>

<head><title>Titre</title></head>

<body>

<div id="contenu">

  <div id="bloc_haut">

      <div class="bloc_haut_gauche">
            <!-- Ici le titre de ta newsletter -->
      </div>

      <div id="bloc_haut_droit">
            <!-- Ici la date de parution de ta newsletter -->
      </div>

  </div>

  <div class="bloc_milieu">
        <!-- Ici tu peux mettre tout le contenu de ta newsletter avec la mise en page de ton choix -->
  </div>

  <div class="bloc_bas">
        <!-- le pied de page de ta newsletter, si tu souhaites rajouter des copyrights, tu pourras le faire ici -->
  </div>

</div>

</body>

</html>

Bon, c'est une ébauche rapide, mais je pense que ça pourra te servir de base :Oeil: !





Merci Lilie Duciel !
Revenir en haut Aller en bas
http://img408.imageshack.us/g/norore.png/ http://www.nororedreams.fr/
Ange discret
Masculin
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
avatar
Flow57
Merci beaucoup :)

Voilà donc avec quelques petites modifications :
index.html
Code:
<html>

<head><title>Waly'Mag - Newsletter N°1</title>
<link rel="stylesheet" type="text/css" href="http://www.walymag.com/divers/newsletter/style.css" />
</head>

<body bgcolor="#8FCC2C">

<div id="contenu">

  <div id="bloc_haut">
 
  <img src="http://www.walymag.com/divers/newsletter/img/header.jpg"><br />
  <img src="http://www.walymag.com/divers/newsletter/img/barre.jpg">
   
      <div class="bloc_haut_gauche">
            Newsletter N°1<!-- Ici le titre de ta newsletter -->
      </div>

      <div id="bloc_haut_droit">
            1er Septembre 2008<!-- Ici la date de parution de ta newsletter -->
      </div>

  </div>

  <div class="bloc_milieu">
        TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE <!-- Ici tu peux mettre tout le contenu de ta newsletter avec la mise en page de ton choix -->
  </div>

  <div class="bloc_bas">
        © Copyright 2008 Walymag.com - Walygator Parc<!-- le pied de page de ta newsletter, si tu souhaites rajouter des copyrights, tu pourras le faire ici -->
  </div>

</div>

style.css
Code:
/* Définition de l'ensemble global de la page du contenu contenant les blocs */
#contenu
{background: http://www.walymag.com/divers/newsletter/img/background.jpg; /* le fond que tu veux (couleur ou image ou autre) */
width: 500 /* largeur en pixel */;
height: auto;
margin: auto;}

/* Définition du bloc du haut qui devra contenir les deux images de l'en-tête collées l'une contre l'autre sur la même hauteur */
#bloc_haut
{width: 500 /* largeur en pixel */;
height: 169 /* hauteur en pixel */; }

/* Le bloc de gauche de l'en-tête */
.bloc_haut_gauche
{background: url(http://www.walymag.com/divers/newsletter/img/background.jpg) no-repeat #7AB815  /* avec une couleur pour remplacer l'image si le lien est mort*/;
float: left;
margin: auto;
width: 500;}

/* Le bloc de droite de l'en-tête */
.bloc_haut_droit
{background: url(/* le lien de ton morceau droit d'en-tête */) no-repeat #7AB815  /* avec une couleur pour remplacer l'image si le lien est mort*/;
float: right;
margin: auto;
width: 500;}

/* Le bloc du contenu, l'image de fond qui fait 1 pixel de hauteur */
.bloc_milieu
{background: url(http://www.walymag.com/divers/newsletter/img/background.jpg) repeat-y #7AB815  /* avec une couleur pour remplacer l'image si le lien est mort*/;
clear: both;
margin: auto;
width: 500}

/* Le bloc du pied de page */
.bloc_bas
{background: url(http://www.walymag.com/divers/newsletter/img/basgauche.jpg) no-repeat #7AB815 /* avec une couleur pour remplacer l'image si le lien est mort*/;
margin : auto;
float: left;
text-align: center;
font-family: Bookman Antiqua, sans-serif;
font-size: 10px;
width: 500;}

Le résultat : http://www.walymag.com/divers/newsletter/

Comme tu peux le voir je n'ai pas arrivé à mettre le texte sur la barre et cette mascotte entièrement visible en bas à gauche ... =/ Tu pourrais modifier mes erreurs ?
Revenir en haut Aller en bas
http://www.adoslife.fr
Admin
Féminin
Nombre de messages : 2606
Logiciel : Gimp - Inkscape
Réputation : 49
Points : 1010
Date d'inscription : 23/11/2007

Détails sur le membre
Logiciel principal: Gimp
Ma disponibilité: Dispo pour surveiller, pour grapher, faudra patienter...
Spécialités graphiques: Codeur
avatar
Norore
L'en-tête, il fallait plutôt le couper en deux, dans le sens de la hauteur :konten: !

Et le bas, c'est tout le bas en prenant bien le croco :Oeil: !





Merci Lilie Duciel !
Revenir en haut Aller en bas
http://img408.imageshack.us/g/norore.png/ http://www.nororedreams.fr/
Ange discret
Masculin
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
avatar
Flow57
L'entête ... la barre ...



Et tout le bas c'est à dire ? De cette façon :

Revenir en haut Aller en bas
http://www.adoslife.fr
Admin
Féminin
Nombre de messages : 2606
Logiciel : Gimp - Inkscape
Réputation : 49
Points : 1010
Date d'inscription : 23/11/2007

Détails sur le membre
Logiciel principal: Gimp
Ma disponibilité: Dispo pour surveiller, pour grapher, faudra patienter...
Spécialités graphiques: Codeur
avatar
Norore
Essai plutôt avec ces images découpées :












Merci Lilie Duciel !
Revenir en haut Aller en bas
http://img408.imageshack.us/g/norore.png/ http://www.nororedreams.fr/
Ange discret
Masculin
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
avatar
Flow57
http://newsletter.walymag.com/

:bouche cousu:

Serait il possible de te contacter par MSN / Skype / Gtalk, ne serais-ce qu'un instant, le temps de terminer cette petite chose ? :)
Revenir en haut Aller en bas
http://www.adoslife.fr
Admin
Féminin
Nombre de messages : 2606
Logiciel : Gimp - Inkscape
Réputation : 49
Points : 1010
Date d'inscription : 23/11/2007

Détails sur le membre
Logiciel principal: Gimp
Ma disponibilité: Dispo pour surveiller, pour grapher, faudra patienter...
Spécialités graphiques: Codeur
avatar
Norore
Voici ce que ça donne chez moi sous Firefox (version 3) :



Et sous Internet Explorer (version 7) :



Si ça te convient, je t'envoie un lien pour télécharger mes archives :Oeil: !

PS : je n'arrive pas à mieux dans l'urgence, désolée :mimi:: !





Merci Lilie Duciel !
Revenir en haut Aller en bas
http://img408.imageshack.us/g/norore.png/ http://www.nororedreams.fr/
Ange discret
Masculin
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
avatar
Flow57
Arf pourquoi le texte est si loin du header sous Firefox ? :o C'est ce que je trouve de plus gênant ... enfin je ferai avec pour cette fois, la prochaine newsletter etant dans un mois normalement, j'ai le temps de revoir ca :) donc je veux bien l'archive oui. :)
Revenir en haut Aller en bas
http://www.adoslife.fr
Admin
Féminin
Nombre de messages : 2606
Logiciel : Gimp - Inkscape
Réputation : 49
Points : 1010
Date d'inscription : 23/11/2007

Détails sur le membre
Logiciel principal: Gimp
Ma disponibilité: Dispo pour surveiller, pour grapher, faudra patienter...
Spécialités graphiques: Codeur
avatar
Norore
@Flow57 a écrit:
Arf pourquoi le texte est si loin du header sous Firefox ? :o C'est ce que je trouve de plus gênant ... enfin je ferai avec pour cette fois, la prochaine newsletter etant dans un mois normalement, j'ai le temps de revoir ca :) donc je veux bien l'archive oui. :)
je t'avouerais que je n'en ai aucune idée :Gné: ! Mais si tu trouves la solution, ce serait gentil de me le dire :Oeil: !

Surveille ta boîte de messagerie privée :Oeil: !





Merci Lilie Duciel !
Revenir en haut Aller en bas
http://img408.imageshack.us/g/norore.png/ http://www.nororedreams.fr/
Ange discret
Masculin
Nombre de messages : 20
Réputation : 0
Points : 0
Date d'inscription : 30/06/2008
avatar
Flow57
Ca marche. Merci. Oui je te préviendrai ;) En attendant je vais me passer de l'image du bas je pense :)
Revenir en haut Aller en bas
http://www.adoslife.fr
Admin
Féminin
Nombre de messages : 2606
Logiciel : Gimp - Inkscape
Réputation : 49
Points : 1010
Date d'inscription : 23/11/2007

Détails sur le membre
Logiciel principal: Gimp
Ma disponibilité: Dispo pour surveiller, pour grapher, faudra patienter...
Spécialités graphiques: Codeur
avatar
Norore
@Flow57 a écrit:
En attendant je vais me passer de l'image du bas je pense :)
Attend de voir mon code source avant ^^ !





Merci Lilie Duciel !
Revenir en haut Aller en bas
http://img408.imageshack.us/g/norore.png/ http://www.nororedreams.fr/
Contenu sponsorisé
Revenir en haut Aller en bas
 
Découpe
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» PGX, coupe faim
» Mon HDMI coupe tout sauf PCM
» B.TV 4G offerte en illimité pour la coupe du monde
» pc qui se coupe sans cesse
» Quizz euro 2008

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: Archives :: Les questions sur le graphisme :: Aide au codage de sites web-