Bienvenue sur endesign,

Ce blog a été créé pour faciliter la distribution des designs que je fais, en premier lieux pour les utilisateurs d’over-blog mais aussi pour tout site internet.

Je ne prétends aucunement être un professionnel, loin de là, je veux juste m’améliorer dans le domaine du design et du dessin sous photoshop. Je profite donc du besoin de certains pour acquérir de la pratique dans ce milieu.Toutes vos remarques, questions et aides sont les bienvenues. J’essaierai d’y répondre le plus rapidement possible.


Tous les designs présentés sur ce site sont utilisables, mais vous pouvez me demander d’y apporter des modifications, ainsi je peux changer toutes les couleurs, ajouter des logos, intégrer un fond…


L’utilisation de mes designs est gratuite mais soumise à conditions:
1- laisser un commentaire dans le design concerné avec un lien vers votre blog pour faire une base d’exemples
2- mettre un lien vers mon blog sur le vôtre.
3- Me prévenir par mail

Zone de téléchargment ---=== Aller dans la zone de téléchargement ===---

Si vous voulez me demander un nouveau design, c’est possible, vous devez me dire ce que vous désirez : fond, couleurs, forme…
Si vous voulez une texture spéciale (pierre, eau, bois…), trouvez des images ou des photos que je pourrais utiliser comme base (google section image est très bon pour ça).
Je fais toujours plusieurs couleurs pour chaques modeles mais toutes les teintes sont possibles, demandez-moi si vous voulez une couleur particulière pour un design.


--------important--------

Je suis actuellement à la recherche d’une personne (ou plusieurs) pour développer des css complets (toutes les pages, toutes les polices…) autour de chacun de mes designs. Si vous vous en sortez bien en css et que vous avez un peu de temps vous pouvez me faire un css ou deux, pas forcément tous. En fait, le mieux pour moi serai que plusieurs personnes me choisissent chacun un design et me développent le css adéquat

Dans un futur proche je compte stocker les éléments de design sur un ftp ainsi avec les css développés. Vous n’aurez pas à stocker les fichiers sur votre compte (cela restera tout de même possible). Cela permettra en même temps d’utiliser le script de changement de css pour pouvoir tester tous mes designs sur endesign.over-blog.com

Je ne suis pas très bon en orthographe, actuellement en Angleterre alors j’utilise des claviers anglais la plupart du temps et j’ai un accès à Internet limité, c’est pourquoi je suis aussi a la recherche d’un correcteur orthographique de confiance qui aurai accès à l’administration du blog et y passerai 2 ou 3 fois par semaines pour corriger les fautes.

Donc j'ai fait un menu de navigation et je repasse en 3 colonnes car il paraît que le menu en haut n'était pas trés visible pour les nouveaux.

Dans quelques minutes grosse mise à jour de la dl zone, plein de designs y font leur apparition, cris, van et autre sous plusieurs couleurs, maintenant vous pouvez tester tous les designs en telechargement, certains liens ne marchent pas, attendez la mise à jour.

c'est mieux le menu comme ça?

Les designs de modules, conception, installation, by The_end

 

Dans cet article je vais essayer de vous expliquer simplement comment fonctionne le design des modules de votre blog overblog.

Je ne suis pas encore un crac sur le sujet, je suis ouvert à tout commentaire, il est pas nécessaire de dire que je peux me tromper, et dans ce cas dites le moi.

 

Pour toute information supplémentaire sur le css d’over-blog allez voir le blog de francisek dans les liens.

 

Je fais court cette fois et je donne les bases, dites moi si vous en voulez plus

 

Je prendrai en exemple le design du style 2 qui est simple.

 

 

1. organisation générale

Le design des modules se fait avec plusieurs images :

- 8 images pour le tour du module

 4 angles

 4 bordures

 

Voici les images du style 2, vous ne voyez pas certaines ? En fait elles ne font que 2 pixels x 1 pixel, mais nous verrons plus tard comment elles sont répétées grâce au fichier css.

http://accel7.fdata.over-blog.com/modele/2/pics/box-top-left.png
http://accel1.fdata.over-blog.com/modele/2/pics/box-middle-left.png

http://accel4.fdata.over-blog.com/modele/2/pics/box-bottom-left.png

http://accel4.fdata.over-blog.com/modele/2/pics/box-top-center.png

http://accel5.fdata.over-blog.com/modele/2/pics/box-bottom-center.png

http://accel2.fdata.over-blog.com/modele/2/pics/box-top-right.png
http://accel3.fdata.over-blog.com/modele/2/pics/box-middle-right.png

http://accel0.fdata.over-blog.com/modele/2/pics/box-bottom-right.png

 

 

- 1 images pour le fond

 Vous pouvez utiliser une image pour mettre en fond des modules

 

 

 

 

2. création d’un design de module

 

Pour créer un nouveau design pour vos modules, vous avez donc besoin d’un logiciel de dessin, le mieux est photoshop mais la prise en main n’est pas immédiate, un autre bon programme qui permet d’obtenir de très bons résultats en quelque clic est photo impact.

 

Pour avoir une idée de la taille que doit avoir votre design, prenez un screenshot de votre blog avec votre style actuel (le model 1 permet d’avoir les meilleures proportions).

Ensuite découpez juste un module dans un nouveau fichier, cela vous permet de savoir où sera placé quoi.

 

Vous pouvez commencer à dessiner par-dessus, dans un premier temps gardez à l’idée que vous devrez découper chaque partie, alors ne faites pas trop compliqué.

 

La dernière étape : découpez chaque élément, gardez les même nom que ceux de base, c’est plus simple pour éditer le css ensuite.

 

 

3. Les parties du css appliquées aux modules

 

Je vais vous donner en détail les éléments du fichier css qui affectent directement le design des modules.

 

.box {}	Le module en general
.box h2 {}	Le titre du module
.box-top  {}	Le haut du module (box-top-center.png)
.box-left {}	La bordure gauche du module (box-middle-left.png)
.box-right {}	La bordure droite du module (box-middle-right.png)
.box-bottom {}	Le bas du module (box-bottom-center.png)
.box-topLeft {}	Angle en haut à gauche (box-top-left.png)
.box-topRight {}	Angle en haut à droite (box-top-right.png)
.box-bottomLeft {}	Angle en bas à gauche (box-bottom-left.png )
.box-bottomRight { padding:3px; }	Angle en bas à droite (box-bottom-right.png ) si vous ne mettez pas le padding :3px il apparaît parfois un décalage et si les images du haut et du bas sont trop grandes elles se superposeront
.box-content {}	Ici c’est l’intérieur du module, là ou sera le texte, liens listes
.box-content p {}	Aspect spécifique aux paragraphes
.box-content ul {}	Aspect spécifique à chéplucoi
.box-content li {}	Aspect spécifique aux listes
.box-content a {}	Aspect des liens du module

 

Comme vous pouvez le constater pour mettre une image il faut utiliser la commande

aackground: url(votre image) repeat-x scroll top left; }

 

url(votre image)

Remplacez votre image par l’emplacement de votre image sr le web

repeat-x

Permet de régler la répétition de l’image, ce qui permet avec 2 pixels de faire une ligne

3 options :  repeat-x répéter à l’horizontale

 Repeat-y répéter à la verticale

 No-repeat ne pas répéter l’image (pour les angles)

Scroll ou fixed

Permet de déterminer si l’image bouge en même temps que la page ou reste fixe, pour les modules c’est toujours scroll.

top left, top right, bottom left, bottom right, top center

Permet de régler le positionnement initial de l’image.

 

Pour finir une fois vos images bien placées il se peut que le texte soit mal placé et dépasse sur les image, il faut alors régler le padding du module.

 

Pour cela dans la ligne .box-content { }

Placez padding :XXpx XXpx XXpx XXpx;

 

Et ajustez les valeurs XX pour mieux placer votre texte.

Dans l’ordre : marge : haut droite bas gauche

 

 

Voilà vous pouvez vous lancer, plus tard nous verrons comment mettre une image différente en fond de chaque module.

nouveau design en metal, à partir de photo de ma chaine de montre

Encore des nouveautés,

mises à jours de beaucoup de designs,
mise en test de presque tous,
mise à jour de la DL Zone

avancé sur le design biblio
nouveau design iron

et 2 didacticiels viennent d'arriver

ouf

Utilisation de mes designs

Un fois téléchargé et dézipé, vous trouverez dans mes packs plusieurs fichier s:
  Des images (dans le dossier pics/css), elle sont à up loader sur votre blog, de préférence dans un dossier nommé graf.
 Une page html qui permet de tester le design
 Un fichier custom.css (dans le dossier css) qui est le fichier css d’exemple.

Les css sont des dérivés du model 2 donc avant de l'installer dans design, passez en model 2

Si vous voulez utiliser les modules sans changer votre css actuel apportez les modifications des lignes, c'est a dire qu'il faut copier ces lignes dans le fichier css/custom.css dans votre css sur overblog

.box 
.box h2
.box-top { background : url(../pics/graf/box-top-center.png) repeat-x scroll top left;}
.box-right
.box-bottom 
.box-topLeft 
.box-topRight
.box-bottomLeft
.box-bottomRight
.box-content    pour le fond du module
.article  pourle fond de l’article

!attention! Parfois je change l’ordre desbox-botom,top… Pour arranger la superposition des images due au code html, donc recopiez bien.

!attention!
Mettre les fichier dans un dossier nommé graf ne suffi plus, il faut metre à jour les lignes "url (adresse de l'image)" avec la location des images sur votre blog

c'est les ligne de ce type qui sont a modifier : { background : url(../pics/graf/box-top-center.png) repeat-x scroll top left;}

en remplacen ../pics/graf/box-top-center.png
par l'adresse réel du fichier sur votre blog ou sur un ftp externe

exemple pour moi c'est de ce type, cela change pour chaque blog :
.box-right       { background:transparent url(http://idata.over-blog.com/0/06/44/91/graf/box-middle-right.png)

Les css fournis ne sont pas encore vraiment aboutis,je cherche des personnes voulant m’en faire en utilisant mes designs,j’ouvrirai ensuite une section de lien vers leurs sites  pour les remercier.