Les sites avec un webdesign plein écran, envahissent le web. Pour la simple et bonne raison que leur mise en page est souvent simple, efficace et permet de mettre avant des visuels qui en jettent. Pour vous aider a faire de même, je vous propose 8 ressources Jquery.

Bien avant l’explosion et l’utilisation massive de Jquery, le Flash était la principale technique utilisée pour réaliser des sites « fullscreen« . Les designers qui se sont tourné vers la librairie Jquery ont permis de faire avancer la technologie  pour offrir des sites toujours plus rapides, toujours plus animés et prenant la totalité de l’écran du navigateur. Vous cherchez les ressources et les tutoriels sur le sujet ? Vous les avez sous la main !

Menu animé Jquery en plein écran

Galerie fullscreen avec miniatures animées

Galerie fullscreen

Galerie Jquery avec miniatures

Le célébre plug-in « Supersized » Jquery

Jquery Fullscreener plug-in

Un tutoriel CSS + Jquery

Galerie / slider en fullscreen

Partagez vous aussi vos ressources, je n’hésiterai pas à les rajouter à l’article !

C’est aujourd’hui qu’ouvre Living Tuts, le nouveau site de référence pour tutoriels. Au programme webdesign, digital painting, développement web, Flash et bien plus ! Tout ça avec des tutoriel écrits, vidéos et in French please !

Mûrement réfléchi et durement mis en œuvre depuis quelques mois, Living Tus sort enfin de terre. Parti de l’initiative de Gaétan Weltzer aka Design Spartan, rejoint Yoann Marie, Living Tuts compte offrir d’ici quelques temps, des dizaines de tutoriels de qualité. C’est bien beau tout cela mais au fait qu’est-ce que Living Tuts ?

Vous avez dit Living Tuts ?

Il s’agit d’un site  de tutoriels écrits et vidéos. Cette initiative est née à la suite d’une triste constatation : pourquoi faut-il toujours aller sur des sites anglophones pour trouver de bons tutoriels et surtout de haut niveau ?..

Le but est donc d’amener une solution à cela en espérant créer un site incontournable dans le domaine se démarquant non pas par la quantité, mais bien par la qualité ! Et pour élargir le site, il ouvrira dans quelques temps en version anglaise. Il ne s’agit donc pas d’un énième site de tutoriels proposant des tutos pour débutants vus et revus, mais d’un projet solide de partage et d’entraide.

Les tutoriels

Il me semble important de parler des tutoriels, vu qu’il s’agit du cœur du site. Ils seront écrits et décriront une technique étape par étape ou alors en vidéo, avec ou sans commentaire. Les logiciels et sujet traités peuvent être variés. Vous en avez un aperçu avec le menu des catégories sous le logo mais d’autres pourraient facilement voir le jour. Dans les prochaines semaines s’ajouteront donc aux tutoriels déjà présents des tutoriels de webdesign, d’intégration HTML/CSS, de développement, d’Action Script 3, sur le CMS WordPress, des tutoriels d’effets de textes ou de matte painting sur Photoshop, etc…

Living Tuts est un projet qui me tiens personnellement à coeur, car je fais parti des rédacteurs du site, prêts à partager trucs et astuces avec vous ! Le rendez-vous est donné sur Living Tuts !

Sources :  article d’ouverture de Living Tuts

On a souvent besoin d’un coup de pouce pour trouver une idée lors du développement d’un site. Pour vous donner des astuces, je vous propose une sélection de tutoriels et de ressources orientés développement, webdesign et notament Jquery. A tester et à garder sous le coude !

1. Codez votre premier plug-in Jquery :

2. Une infobulle Jquery pour vos images :

3. Des boutons animés à l’aide de sprites et Jquery (partie 1 : Photoshop) :

4. Des boutons animés à l’aide de sprites et Jquery (partie 2 : Code)

5. Comment faire une montre en CSS et Javascript :

6. Faire son propre slider Jquery et XML :

7. Faire un beau formulaire à l’aide de CSS3 :

8. Comment coder un site en XHTML à partir d’un PSD :

9. Ressource : un agrégateur RSS en PHP :

10. Ressource : une galerie d’images avec Jquery :

Apprendre à créer son propre webdesign à l’aide de tutoriels, c’est super ! Mais il n’est pas toujours facile de trouver d’en trouver de qualité… Je vous concocte une fraîche sélection de 9 nouveaux tutoriels de webdesign sous Photoshop !

Les tutoriels proposé sont en anglais…Au cas la langue poserai problème, je vous conseille cette liste de traduction des outils de Photoshop.

1. Comment créer un design pro :

2. Comment créer un design audacieux et vibrant :

3. Comment créer un design propre et professionnel :

4. Design de portfolio noir et blanc :

5. Comment créer un design propre [Très détaillé !] :

6. Comment créer un portfolio propre et minimaliste :

7. Faire un design de portfolio :

8. Créer un design bleu et épuré :

9. Créer une interface web pour un jeu de PS3 :

En bonus, un tutoriel pour créer un template de site en utilisant HTML5 et CSS 3 :

N’hésitez pas à partager vos liens pour compléter la liste !

Aujourd’hui je vous propose une sélection de 10 tutoriels pour vous perfectionner sur le logiciel vectoriel d’Adobe.

1. Comment créer une icône « premiers secours » :

2. Créer une « surface pointillée »  :

3.Créer un style pour une police :

4. Créer une illustration de fraise chocolatée :

5. Comment dessiner une mascotte de koala :

6. Comment créer un dessin d’ours pour un tee-shirt :

7. Créer une illustration de toaster :

8. Créer le logo d’Abduzeedo 2010 :

9. Créer un vaisseau vectoriel :

10. Créer une illustration rétro Space Invaders

Allez au boulot ! Et bonne chance ;-)

Aujourd’hui sur Webdesigner Trends, une sélection de 10 nouveaux tutoriels du web pour créer un webdesign sous Photoshop !

On commence tout de suite avec un tutoriel de webdesign d’hôtel/restaurant, élégant et rustique :

1. Créer un webdesign d’hôtel/restaurant :

2. Créer un webdesign de portfolio :

3. Créer un webdesign d’architecte ou de vendeur de bien immobilier :

4. Créer un webdesign minimal et brillant :

5. Créer un webdesign grungy et translucide :

6. Comment créer un webdesign de portfolio :

7. Apprenez à créer un webdesign dans un style 3D :

8. Créer un webdesign de portfolio élégant :

9. Créer un webdesign de portfolio sur un fond bois :

10. Créer un thème WordPress complet :

Mention spéciale pour ce tutoriel vidéo de chez Grafikart, vraiment complet et bien réalisé ! En plus en français, alors régalez vous !

Je vous propose aujourd’hui une compilation de 10 tutoriels de qualité pour créer un design de site sous Photoshop !

Design pour un site de groupe de musique

Design simple et moderne

Créer un élégant portfolio

Créer un design de site graveleux

Créer un design de site nuageux

Créer un design de site vintage

Créer un design de site inspiré d’Apple

Créer un design de site professionnel

Créer un design de site coloré

Créer un design pour WordPress

Sur le web,  il existe des centaines de tutoriels en tout genres pour convertir un design de site réalisé sous Photoshop, en vrai site exploitable avec XHTML/CSS. Je vous propose une sélection de tutoriels (en anglais) pour progresser dans l’intégration web !

Je vous invite à partager des liens si vous connaissez des tutoriels de qualités sur l’intégration PSD/XHTML en français !