Template Photoshop - Créer un site Web avec une video en arrière plan
ERROR
00:00
00:00

TUTO Template Photoshop - Créer un site Web avec une video en arrière plan

Damien Gallez
6,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Voici la première partie d’un tuto en vidéo consacré à la création d’un template de page Web avec intégration d’une vidéo en arrière plan.

Cette 1ère partie dédiée à la création d’un template de site Internet avec Photoshop, sera l’occasion de vous apprendre à être méthodique dans la façon de travailler, de vous organiser, afin d’intégrer au mieux ce template en HTML à l’aide du Framework de Bootstrap lors de la 2ème partie de ce tutoriel.

Le cours aura pour thème la chaussure afin de mettre en valeur un produit, une marque, un accessoire à travers une vidéo qui se jouera automatiquement en arrière-plan de votre site Internet. 

Au programme de ce tuto Webdesign sous Photoshop, nous allons apprendre à :

  • Installer une police (font)
  • Créer un gabarit de page
  • Créer des repères et marges
  • Ranger ses calques dans des dossiers
  • Créer facilement un logo avec du texte
  • Créer un menu
  • Simuler l’intégration d’une vidéo en background avec un texte superposé
  • Créer un ghost button
  • Mettre une phrase d’accroche en avant
  • Intégrer des fiches produits avec photo et description
  • Créer une sidebar et simuler les widgets de Facebook (likebox) et de Twitter (last tweet)
  • Créer un footer (pied de page)

Ce tuto Photoshop webdesign peut-être suivi à partir de la version CS6 de Photoshop et est destiné à un public débutant. Pour plus d’informations concernant cette formation Photoshop, je vous invite à regarder l’extrait vidéo. Le résultat final de ce cours en html vous sera dévoilé. 
Bon tuto à tous.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Installation des fonts
Leçon 2
Création de la barre, du logo et du menu
Leçon 3
Simulation de la vidéo en arrière plan
Leçon 4
Mise en avant d'une accroche
Leçon 5
Création des fiches produits avec photo et description
Leçon 6
Création de la sidebar et widget Facebook & Twitter
Leçon 7
Création du footer et fin

Plan détaillé du cours

Leçon 1Installation des fonts
02m15s
Leçon 2Création de la barre, du logo et du menu
14m33s
Leçon 3Simulation de la vidéo en arrière plan
13m28s
Leçon 4Mise en avant d'une accroche
05m48s
Leçon 5Création des fiches produits avec photo et description
07m22s
Leçon 6Création de la sidebar et widget Facebook & Twitter
12m15s
Leçon 7Création du footer et fin
05m33s

Avis des apprenants

Détail des avis
249
Apprenants
8
Commentaires
4,9/5
Note moyenne
5/5
7
4/5
1
3/5
0
2/5
0
1/5
0
Jean Massonnet
Jean Massonnet
Publié le 10/09/2018
Tuto simple et clair, mais vraiment trop basique je trouve... Il manque énormément d'informations, notamment les notions autour des règles à respecter pour faciliter l'intégration des maquettes pour un développeur. C'est pourquoi je retire 1 étoile car sinon pour le niveau débutant c'est clairement expliqué.
Anthony Lamart
Anthony Lamart
Publié le 25/09/2016
Simple, efficace et clair ! Très bonne formation.Merci
Bruno Bourdon
Bruno Bourdon
Publié le 09/07/2015
toujours aussi convivial et pédagogue. Que du bon. Comme toujours ;)

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

Photoshop CS6, Photoshop CC

Quel est le niveau requis pour suivre ce tuto ?

débutant

Est-ce que l'intégration HTML est abordée dans ce tuto ?

Non. Il s'agit d'un tuto axé webdesign seulement. La partie intégration en HTLM et CSS est proposée dans une seconde partie.

Que contient le fichier source ?

Le fichier PSD final ainsi que les éléments utilisés lors de ce tuto.

Bonjour Damien, l'intégration est elle en Responsive Design ?

Bonjour, oui à l'aide du framework de bootstrap :)

Bonjour, Quelle est la suite de ce tuto?Intégration html vidéo etc.... Merci

Bonjour, la suite sera disponible prochainement. Nous avons un planning assez chargé en ce moment qui nous oblige à mettre en pause l'enregistrement de tuto. On fait au plus vite !

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données