Dans ce tutoriel Photoshop en vidéo, nous allons apprendre à créer un design de site Web responsive en mobile first (amélioration progressive) pour une intégration Bootstrap. Nous partirons d’une version mobile afin d’ajouter progressivement des fonctionnalités supplémentaires pour les versions tablettes et desktops.

Nous apprendrons donc à concevoir une maquette de site afin de mieux appréhender le système de grille de Twitter Boostrap qui nous permettra de gérer facilement le responsive d’un site Internet.

rendu tuto bootstrap photoshoprendu tuto bootstrap photoshop-mobile

Programme du tuto mobile first

  • Créer un gabarit de page pour les mobiles en lecture linéaire
  • Créer un gabarit de page pour les tablette en lecture 2 colonnes
  • Créer un gabarit de page desktop en lecture 4 colonnes
  • Ajouter des repères sur Photoshop
  • Créer des marges
  • Créer des boutons
  • Augmenter son espace de travail dans Photoshop pour créer les autres versions en améliorations progressives

Ce cours est destiné aux débutants et peut être suivi à partir de la version CS6 de Photoshop.