boite

Maquettage Photoshop

Pooo durrrr

1. Introduction  2.Maquettage  3.Tranchage  4.Sortie HTML Tableaux  5.Sortie HTML CSS  6.Conclusion 

 

Non achevé !!!!

 

Ce tutoriel est un pot pourri de mes connaissances en webdesign.
En cas de modifications, mailme sur yoannmagli at gmail point com

A qui s'adresse ce tutorial

A tous ceux souhaitant créer des sites poussés graphiquement en utilisant la technique des maquettes sous photoshop / dreamweaver.

Préalables INDISPENSABLES

Avant de lire ce tuto, familiarisez-vous avec les principes de base de photoshop tels que :

  • les calques
  • le dessin vectoriel
  • les styles, options de fusion

Pour cela, saisissez-vous de photos de votre chien/chat et essayez tout les boutons (j'ai appris comme ça c'est très efficace).

Lisez grids are good [PDF]

 

Outils utilisés

J'utiliserais

  • Adobe Photoshop CS2 en américain (toute version supérieure ou égale à 7 fonctionnent)
    • Remarquons au passage que j'utilise une version anglaise car cela est beaucoup plus pratique pour suivre
      les tutorials anglais (comme ceux de l'énormissime smashingmagazine ^^)
  • Dreamweaver 8 comme éditeur web mais quasiment n'importe quel éditeur fait l'affaire.

 

I. Introduction

Tout d'abord, qu'est-ce qu'une maquette ?

En simplifiant, une maquette est une "image" d'un site web, une représentation de son "concept".
Cette image permet d'imaginer, de poser sur papier la façon dont les différents éléments d'un site seront placés.

Photoshop permet
- de créer des maquettes afin de pouvoir montrer au client a quoi ressemblera son site.
- d'accompagner le développeur dans le passage de la maquette au site final.
Une fois la maquette finie, photoshop comprend plusieurs outils qui permettent le passage de cette maquette en site html (plus ou moins) facilement.

 
Propulsé par... html et php codé a la main ^^