Archive for juillet, 2010

Living Tuts

pres_livingtuts

Bonjour,

Encore une fois, je vais vous embêter  passionnés(toujours pas? :p) avec la « découverte » d’un site.

Ce site s’appelle LivingTuts, à l’origine du projet, se trouve Gaétan Weltzer (aka Design Spartan) et son ami Yoann Marie. Mais, pourquoi vous informer que ce site vient de sortir le bout de son nez? Tout d’abord, ce site regroupe(ra) un grand nombre de tutoriaux en français et en anglais, sur le matte-painting, le digital-painting, le dev’ web etc… . Ensuite, ce site semble très prometteur, déja en voyant le constat qui a lancé la création de ce site:

Gaétan Weltzer, qui a fait un mot accompagné de la plupart des rédacteurs(dont je fait partie :p), résume très bien le problème auquel nous somme confronté:

“Une idée qui a vu le jour dans ma tête il y a déjà plus de 2 ans après le triste constat que le monde francophone manque de tutoriels de haut niveau est aujourd’hui concrétisée. Ce projet me tient énormément à cœur et j’espère le voir encore grandir et évoluer avec vous.”

Voila, je vous invite donc à vous rendre sur livingTuts, et découvrir vous même ce site.

Lien: http://www.fr.livingtuts.com/

Créer des ancres

Salut,

on vas voir comment créer une ancre… en html, une ancre, c’est un lien qui vous amènera à un endroit précis de la page dans laquelle vous vous trouvez. Pour créer ce type de lien, nous utiliserons la balise… « a » du html, il faudra juste rajouter une petite chose, que nous allons voir tout de suite.

Mise en pratique

Pour créer ce type de lien, il vas nous falloir un code de base (je ne met que le contenu du « body » :

<div id="vide">

</div>

<div id="ancre">

</div>

Et le css:

#vide{width: 100%;
 height: 3000px;/*Une grande hauteur pour voir comment le lien vas interargir avec la page*/
 background: #000;
}
#ancre{height: 75px; 
width: 100%; 
background: red;
}

Maintenant, pour créer l’ancre à proprement parler, dans le « href » (<a href= ».. » title= »"></a>, vous mettrez le nom de la div à atteindre (ici, « ancre » après un # :

<a href="#ancre">Atteindre la div ancre</a>

<div id="vide">

</div>

<div id="ancre">
</div>

Et voilà, nous avons donc créer un lien ancre, cela peut vous permettre de réaliser des portfolios à une seule page, utiliser plus facilement le javascript etc…

A plus !

Découper un web design

site-waide-découpe

Salut à tous

Aujourd’hui, je vous présente le premier tuto d’une grande série: Créer son site web !(sisi!)

Je vous présente donc la vidéo, et vous donne le PSD utilisé, par la même occasion :

Ressource :

cliquez sur l’image pour télécharger le fichier psd
Je me permet juste de faire un petit rappel de ce que vous devez découper dans un design créer avec photoshop:
  • Les dégradés
  • Les ombres
  • Les lueurs
  • les images (fond, photosgraphies etc…
  • Et, plus généralement, tout ce qui n’est pas réalisable en html-css-Javascript !

Bon apprentissage !