jump to navigation

Création d’un site très simple Partie I août 1, 2009

Posted by pixelmed in Tutoriel photoshop, Web design.
Tags: , , ,
trackback

Création d'un site très simple Partie I

Dans ce tutorial en 2 parties vous aller apprendre à créer un site facile et beau,la première partie sera consacré à la création du template sous photoshop et la deuxième partie aura pour but de vous montrer le codage xhtml/css ..

Le résultat finale

Création d'un site très simple Partie I

Les étapes en résumé

  • La structure de la page
  • l’emplacement et la Division des éléments
  • Ajout du contenu

La mise en place de l’espace du travail

puisque on va créer un simple utilisera pas beaucoup d’option donc on peut sélectionner « web » en haut à droite comme espace de travail
Création d'un site très simple Partie I

Étape 1

– Ouvrer un nouveau document avec une largeur de 960px et une hauteur de 900px et cliquer sur OK.

Création d'un site très simple Partie I

– maintenant aller dans Affichage->Repère… et mettez Verticale sur 270px

Répéter la même chose pour

  • Horizontale :40px,300px,330px

si vous ne voyez pas de repère appuyer sur Ctrl+H pour les afficher.
vous pouvez aussi afficher et masquer la règles avec Ctrl+R.

voila mon résultat

Création d'un site très simple Partie I

Étape 2

maintenant que nous avons mis les repères en place il est devenue plus facile de dessiner les différent partie du site

– Prenez l’Outil Rectangle ou appuyez sur « U » et dessiner 3 rectangles comme suit

Création d'un site très simple Partie I

Étape 3

– changer la couleur des rectangles respectivement de haut en bas

  • #676767
  • #909090
  • #ededed

– changer les noms des rectangles respectivement de haut en bas

  • nav
  • banner
  • content

pour changer la couleur d’un rectangle clique 2 fois sur sa vignette.

Création d'un site très simple Partie I

Voila mon résultat

Création d'un site très simple Partie I

Étape 4

– Sélectionner le claque « Banner » et cliquer 2 fois sur le calque pas sur sa vignette pour ouvrir la boite de dialogue Style de calque

– appliquer un effet « ombre portée » comme suit

Création d'un site très simple Partie I

– et un effet d’incrustation dégradé comme suit

Création d'un site très simple Partie I

– valider en appuyant sur OK.

voila mon résultat

Création d'un site très simple Partie I

Étape 5

– Créer un nouveau groupe nommer le « Boutons » c’est la petite icône qui ressemble à un dossier en bas de la palette des calques

cliquer l’icône pour créer un nouveau groupe tout en appuyant sur ALT, une boite de dialogue vous demandera le nom la couleur etc…
mettez le nom que vous voulez dans notre cas « Boutons » et valider en appuyant sur OK

Création d'un site très simple Partie I

Étape 6

– Sélectionner le calque et appuyer sur T ( Outil texte )

– Puis en haut du document cliquer une fois et taper « Accueil » puis appuyer sur Entrer pour valider le texte et sortir

Création d'un site très simple Partie I

– répéter 3 ou 4 fois la procédure en changeant le nom bien évidement vous obtiendrez quelque chose comme ça

Création d'un site très simple Partie I

Étape 7

– Centrer les élément textes pour cela sélectionner le groupe « Boutons » et cliquer tout en appuyant sur Ctrl la vignette du calque « nav » cela créera une sélection autour du calque nav.

Création d'un site très simple Partie I

– Ensuite Calque->Aligner les calques sur la sélection->Centres dans le sens horizontal

– Quitter la sélection avec Ctrl+D

voila mon résultat

Création d'un site très simple Partie I

Étape 8

– Créer un nouveau groupe sous le nom « Banner » ( étape 5 )

– Sélectionner l’outil forme personnalisé (u) et dessiner une forme simple

Création d'un site très simple Partie I

Étape 9

– cliquer 2 fois sur le calque de la forme créée pour afficher la boite de dialogue « Style de calque » et appliquer les effets suivant
Création d'un site très simple Partie I

Étape 10

– Sélectionner l’outil trait et mettez l’épaisseur sur 1px et la couleur sur blanc

Création d'un site très simple Partie I

– Dessiner un trait vertical qui soit en parallèle avec le repère créée précédemment

– Ajouter du texte dans la partie droite du « Banner »

Voila mon résultat

Création d'un site très simple Partie I

Étape 11

– Créer un autre groupe nommer le Sidebar.

– Créer un rectangle (u) avec une couleur #7e7f7f.

– Ajouter quelques boutons textes ( chaque boutons dans un claque ).

Création d'un site très simple Partie I

– Après chaque boutons mettez un trait blanc de 1px

Création d'un site très simple Partie I

Étape 12

– Créer un nouveau groupe nommer le main

– Ajouter un contenue Aléatoire .

Création d'un site très simple Partie I

– Vous pouvez copier du texte aléatoire depuis lipsum.

pour insérer un paragraphe sélectionner l’outil texte « T » puis cliquer et faite glisser la souris pour créer une grande zone.

Voila mon résultat

Création d'un site très simple Partie I

Étape 13

– Créer un groupe et nommer le « footer »

– En bas du document ajouter un rectangle d’environ 40 pixels avec une couleur #676767

– Insérer le contenue du footer avec l’outil texte.

Voila mon résultat

Création d'un site très simple Partie I

Résultat Finale

– Appuyer sur Ctrl+H pour cacher tous les repère.
– et vous aurez site très beau comme celui la🙂
Création d'un site très simple Partie I

Commentaires»

1. kamel - août 3, 2009

hey man ca gaze c’est kamel c’est un blog vraiment cool(sexy quoi)


Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :