Article tagué photoshop

Transformer une maquette Photoshop en Template XHTML/CSS

Transformer une maquette Photoshop en Template XHTML/CSS
Dans ce tutorial consacré à la conception web, vous verrez les différentes étapes pour convertir une maquette Photoshop en modèle HTML/CSS.

Ce tutorial est composé de deux parties :

  1. Concevoir la maquette avec Photoshop
  2. Convertir la maquette en XHTML/CSS

Site de Six Revisions : http://sixrevisions.com

Photoshop – Modifier une photographie

modele-final-250Dans ce tutoriel, nous allons voir comment modifier une photographie pour lui donner un style original. La succession de manipulation proposée ne sert qu’à titre d’exemple car il existe de très nombreux filtres dans Photoshop que vous pourrez explorer à loisir.

Tout d’abord, ouvrez la photographie de votre choix dans Photoshop et faite une copie de travail pour ne pas perdre l’original du fichier.

Voici la photographie qui servira de base à ce tutoriel :

modele-base-6001

Dupliquez 2 fois le calque d’arrière plan.

Double cliquez sur le calque Arrière plan et faites OK pour le convertir en calque.

Voilà se que vous devez avoir dans le navigateur de calques : les trois calques représentant l’image sur lesquels nous allons appliquer des effets.

les-calques-226

Appliquer les manipulations décrites même s’il vous semble qu’il ne se passe rien dans un premier temps…

Calque 0 :

  • Filtre > Divers > Maximum > 5
  • Filtre > Atténuation > Flou gaussien > 5

Calque Arriere-plan copie :

  • Option fusion > Produit

Calque Arriere-plan copie 2 :

  • Option fusion > Lumière tamisée

modele-base-600-1

Calque Arrière-plan copie :

  • Image > Réglages > Luminosité/Contraste
  • Valeur : Luminosité = +70   -   Contraste = -40

modele-base-600-2

Calque 0 :

  • Filtre > Atténuation > Flou gaussien > 5

Calque Arrière-plan copie 2 :

  • Image > Réglages > Balance des couleurs
  • Tons moyens : Niveaux = +85 / +25 / -30
  • Conserver la luminosité : coché

modele-base-600-3

Voilà en quelques clic une photographie originale qui trouvera surement sa place dans vos créations graphiques. J’ai placé les deux photographies pour vous présenter un un coup d’oeil l’évolution entre ces étapes.

Avant : modele-base-250

Après : modele-final-250

J’espère que ce tutoriel vous aura donné envie d’explorer vos propres modifications et paramétrages des filtres Photoshop.

Retrouvez les différentes manipulations dans cette vidéo de 4,17 min  (cliquez sur l’image pour la visualiser).

view-video

Crédit photo : Hemera Technologies Inc.

Sauf mention contraire, le contenu de cette page est sous contrat Creative Commons.

Un forum pour les passionnés de Photoshop

forum-tosho-pmForum-Toshop.com est un forum consacré à la création graphique autour de ce merveilleux logiciel qu’est Photoshop. Vous y trouverez, entre autre, différents tutoriaux, les galeries des membres, de l’aide, des concours graphiques, la possibilité de faire des demandes d’avatars, signatures, webdesign, logo, etc … ainsi que des jeux en flash et les concours qui les accompagnent.

Forum-Toshop est encadré par une équipe de modérateurs sympathiques est très ouverte qui veille au bon fonctionnement du forum.

Souhaitons longue vie à ce forum.

J’en profite au passage pour saluer Jean-Baptiste (que je suis sur Twitter) pour le codage du design. Il est intervenu pour l’adapter à Wordpress.

forum-tosho

http://www.forum-toshop.com/