Template Photoshop - Créer un site Web avec une video en arrière plan
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
1h01
de formation
7
leçons vidéo
1
chapitre
Débutant
niveau requis
Damien Gallez (damné)
Damien Gallez (damné)
Formateur certifié

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

4.8/5 Trustpilot (1388 avis) Satisfait ou remboursé
1h01
de formation
7
leçons vidéo
1
chapitre

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

Table des matières

Leçon 1

Installation des fonts

02m15
Leçon 2

Création de la barre, du logo et du menu

14m33
Leçon 3

Simulation de la vidéo en arrière plan

13m28
Leçon 4

Mise en avant d'une accroche

05m48
Leçon 5

Création des fiches produits avec photo et description

07m22
Leçon 6

Création de la sidebar et widget Facebook & Twitter

12m15
Leçon 7

Création du footer et fin

05m33

Avis des apprenants

Détail des avis
296
Apprenants
8
Commentaires
4,9/5
Note moyenne
5/5
7
4/5
1
3/5
0
2/5
0
1/5
0
Anthony Lamart
Anthony Lamart
Publié le 25/09/2016
Simple, efficace et clair ! Très bonne formation.Merci
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é.
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

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 !

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
5,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
1h01 de vidéo • 1 chapitre
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 763 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1422 tutos gratuits

Notre politique de protection des données