Tutoriel Photoshop Pour Créer Une Interface Web Professionnelle

TUTORIEL PHOTOSHOP
POUR CRER UNE

INTERFACE WEB
PROFESSIONNELLE
Dans ce tutoriel Photoshop, nous allons crer une interface web

avec un look propre et professionnel. Vous pourrez par la suite
utiliser cette interface tant pour un site personnel quun site
corporatif.
noter que jai seulement traduit le tutoriel ce qui explique que toutes
les images sont en anglais. Jai galement prsum que vous utilisiez la
version anglaise de Photoshop. Si vous avez un problme vous reprer
avec les mots anglais, les images devraient vous aider vous reprer.
Bon tutoriel !
RSULTAT FINAL
Voici le rsultat final de linterface que nous allons crer
aujourdhui dans ce tutoriel.
PRPARER VOTRE
DOCUMENT PHOTOSHOP
1. Pour commencer, crez un nouveau document Photoshop en
utilisant les paramtres affichs dans limage suivante.
DFINIR LES PARAMTRES

DE MESURE EN PIXELS
2. Assurez-vous que vos mesures sont affiches en pixels, qui est
lunit standard pour la conception dune interface web. Dans la
fentre de prfrences (Ctrl/Cmd + K), cliquez sur Units &
Rulers et assurez-vous de rgler les paramtres dunits tels
quaffichs sur limage suivante.
AJOUTER DES GUIDES POUR

DLIMITER LA SECTION DES
CONTENUS
3. laide du panneau dinfo (F8) et de loutil de slection,
ajoutez un guide 120px partir du bout gauche de votre
document comme sur limage suivante.
4. Effectuez la mme tape pour le cot droit de votre interface.

Voici quoi devrait ressembler votre document.
CRER LE LOGO
5. Nous allons maintenant crer le logo du site web. Tout dabord,
crez un nouveau groupe dans vos calques (layers) que vous
pouvez appeler logo .
6. Avec loutil texte (T), crivez le nom de votre logo en lettres
majuscules, dans notre cas, nous crirons SMASHING
(Comme vous pouvez le voir, je nai pas re-traduit tous les mots du
tutoriels, sinon, les images nauraient plus matches avec les tapes
du tutoriel).
7. Par la suite, dans votre panneau de caractres (Window ->
Character), utilisez la police Arial en Bold avec une grandeur de 42
pt. Aussi, dfinissez loption danti-aliasing Sharp et utilisez la
couleur #101112.
8. Double-cliquez sur votre calque de texte pour ouvrir la bote de

dialogue. Slectionnez Gradient Overlay et utilisez les paramtres
inscris sur limage ci-bas.
9. Dplacez le calque SMASHING une distance de 35px

partir du haut et 0px du cot gauche. Dupliquez le calque et
dplacez-le vers la droite. Changez son texte pour Dzine .
Rptez les tapes 6,7 et 8 en utilisant cependant diffrentes
couleurs pour le dgrader. (Couleur de gauche: #b27625 et couleur
de droite: #e5ad27).
10. Re-slectionnez loutil de texte et ajoutez un texte de
description sous le logo avec les paramtres suivants:
11. Le logo final devrait ressembler limage ci-dessous.
CRER LA BARRE DE
NAVIGATION
12. Ajoutez un nouveau groupe dans vos calques et appelez-le
navigation . Par la suite, placez-le en haut du groupe logo .
Ajoutez un nouveau guide avec la rgle du haut et dplacez-le
150px du haut du document. Dessinez ensuite, sur toute la
largeur du document, une ligne horizontale (Raccourcis clavier
U) de4px de hauteur avec une couleur #e3ab27.
13. Ajoutez les liens textes de la barre de navigations 12px de

hauteur partir de la ligne horizontale une distance de 20px
partir du guide de gauche. Slectionnez loutil rectangle coins
ronds (U) et dessinez une bote ayant 72px de largeur par 35px de
hauteur. Dplacez ce calque sous les liens textes et nommez-le
hover . Redresser les coins de gauche et de droite du bas de la
bote avec loutil de conversion des points (Convert Point sur
limage du bas). Double-cliquez sur le calque hover pour ouvrir
sa bote de styles et ajoutez un dgrader de couleurs (Gradient
Overlay). (Couleur de gauche: #e5ad27, Couleur de
droite:#b27625). Changez la couleur du lien Home pour du
blanc #ffffff.
CRER LA SECTION
APPELEZ-NOUS
14. Tlchargez cet icne de tlphone et placez-le cot du guide de
droite. Slectionnez loutil texte, ajoutez un numro de tlphone
gauche de licne et utilisez la police Arial, avec une grandeur
de 20pt et une couleur de #292929. Ajouter une petite description
sous le numro galement en Arial, en Bold, avec une grandeur
de 11pt et la couleur #595959.
CREZ LA PARTIE
HEADER DE LINTERFACE
15. Crez un nouveau groupe dans vos calques et nommez le
header .
16. Slectionnez loutil de rectangle (U) er crez un rectangle
de 1200 px par 440px. Bougez-le 1px sous la barre de navigation
et renommez-le calque header bg . Double-cliquez sur le calque
et slectionnez un Gradient Overlay (Couleur de gauche #2e2226,
Couleur de droite: #7a7556).
17. Crez un autre rectangle de 960px de largeur et de 360px de

hauteur. Dplacez-le 40px partir du haut du calque header
bg et 0px du guide de gauche et renommez le header
container .
CREZ LA SECTION
PROJET EN VEDETTE
(FEATURED PROJECT)
18. Crez un nouveau groupe de calque et appelez le fp .
Slectionnez loutil rectangle (U) et crez un rectangle de 630px de
largeur par 340px de hauteur. Placez-le 10px du haut et 10px
gauche du calque header container . Remplissez ce calque de
noir et nommez-le fp container .
19. Ouvrez une image dans Photoshop et placez-la sur un nouveau

calque au dessus de fp container . Cliquez sur le nouveau calque
avec le bouton droit de votre souris et slectionnez Create
Clipping Mask .
20. partir de la barre de navigation du haut, donnez-lui une

rotation de -4 degrs. Changez ensuite sonBlending Mode pour
Luminosity .
21. Nous allons maintenant crire un titre et une description pour

limage du bloc featured . Crez un rectangle
de 630px par 90px avec la couleur #161718. Changez lopacit du
claque 90% et renommer ce dernier title bg .
22. Crez un autre rectangle de 630px de largeur et de 1px de

hauteur avec une couleur #9c9c9c et renommer le calque title
horizontal line . Bougez le rectangle sur la bordure du haut du
calque title bg .
23. Ajoutez un titre et une description lintrieur du rectangle en
utilisant les paramtres suivants:
POUR LE TITRE:
Arial, couleur: #ffffff, grandeur: 25pt et comme antialiasing , loption Sharp.
Typo:
POUR LA DESCRIPTION:
Arial, couleur: #a4a4a4, grandeur: 12pt et comme antialiasing , loption Sharp.
Typo:
CRER UNE SECTION

QUICK QUOTE (CITATION
RAPIDE)
24. Crez un autre groupe dans vos calques lintrieur du groupe
header et nommez-le quick quote . Crez un rectangle
de 300px de largeur et de 340px de hauteur. Dplacez-le 10px
droite de la section featured et appelez-le qq container .
25. Par la suite, dans le groupe navigation , copiez le style du
calque hover . (Clique-droit sur le calque, slectionnez Copy
Layer Style) Retournez au calque qq container et appliquez le
style. (Clique-droit sur le calque, slectionnez Paste Layer
Style )
26. lintrieur du groupe de calque quick quote , reproduisez

linterface du bloc comme sur limage suivante.
27. Slectionnez loutil de rectangle coins arrondis (U) et crez

une bote de 80px de large et de 35px de haut. Appelez ce calque
submit btn .
28. Double-cliquez sur le calque et appliquez un Gradient
Overlay . Utilisez les couleurs mentionnes ci-bas.
29. crivez par le suite le texte Submit en utilisant la

typographie Arial, en Bold avec une grandeur de13pt.
30. Slectionnez les calques ( submit btn et Submit text ).
Choisissez loutil de la flche (V) et cliquez sur Align vertical
centers et Align horizontal centers dans la barre de navigation du
haut.
CRER LA SECTION
CONTENU PRINCIPAL
31. Crez un nouveau groupe de calque et nommez-le content .
Ensuite, crez un rectangle de 300px de large par 175px de haut et
nommez-le c01 . Placez ce mme calque 30px sous le header
et 0px du guide de gauche. Double-cliquez dessus et appliquez
ces paramtres:
32. Nous allons maintenant ajouter du contenu cette bote.

Premirement, crivez le texte About SmashingDzine .
Slectionnez le mot About et changez sa couleur pour #b47825.
Par la suite, slectionnez le mot Smashing et changez sa
couleur pour #2f2f2f. Ajoutez une petite description ainsi quun
lien texte sous le titre. Voici les paramtres utiliss pour le titre, la
description ainsi que pour le lien texte.
POUR LE TITRE:
Trebuchet MS, Style: Normal, Grandeur: 24pt, Antialiasing: Sharp
Police:
POUR LA DESCRIPTION:
Arial, Style: Normal, Grandeur: 12pt, Anti-aliasing: None,

Couleur: #767676
Police:
POUR LE LIEN TEXTE:

Arial, Style: Bold, Grandeur: 13pt, Anti-aliasing: None,
Couleur: #252525, Soulign
33. Slectionnez loutil de rectangle (U) avec comme couleur, du
blanc. Maintenez enfonc la touche Shift de votre clavier pour
crer un carr parfait de 88px par 88px. Dplacez ce carr une
distance de 10px gauche du calque ( c01). Nommez ce calque
border . Double-cliquez dessus et utilisez les paramtres
suivants:
Police:
34. Crez une autre bote, cette fois de 82px par 82px et placez-la
au centre du calque border . Appelez ce calque box et
changez sa couleur pour #d5d5d5. Slectionnez tous les calques du
groupe content , allez Layer > New > Group from Layers
(Ctrl/Cmd + G) et renommez ce groupe about .
35. Dupliquez le groupe about et nommez le nouveau groupe

services . Dupliquez encore et cette fois, renommez le groupe
portfolio . Nous avons maintenant 3 groupes ( about ,
services et portfolio ). Dplacez le dernier sur le guide droite
du document.
36. Slectionnez les 3 groupes et allez Layer > Distribute >

Horizontal Centers pour espacer quitablement les 3 blocs.
37. Changez les titres des blocs.
CRER LE FOOTER
38. Nous voil maintenant la dernire grande tape du tutoriel.
Crez un nouveau groupe dans vos calques et nommez-le
footer . Insrez un rectangle de 1200px par 100px au bas du
document. Nommez ce calque footer bg . Utilisez le mme
dgrad (Gradient Overlay) que le calque header bg .
39. Ajouter un texte pour la mention Copyright avec la

typographie Arial , une grandeur de 12pt avec le code de
couleur #dddddd.
40. Crez un nouveau groupe lintrieur du groupe footer et

nommez-le subscribe . Crez un rectangle avec coins ronds
de 85px par 35px et nommez son calque subscribe btn .
41. crivez par la suite le mot Subscribe avec la police Arial
en Bold et une grandeur de 13 pt.
42. Reproduisez linterface comme sur limage suivante.
RSULTAT FINAL
Et voil ! Voici le rsultat final de votre interface web. Jespre que
vous avez appris quelques bons trucs pour vos prochains design
dinterfaces web !
Si vous avez des opinions, des commentaires ou dautres trucs et

astuces, nhsitez pas les partager laide de la section
commentaire dans le bas du tutoriel.
TLCHARGER LE FICHIER
SOURCE
Effet Grunge sur vos images avec photoshop cs4

samedi, juillet 18 2009 Effet Sur photo 24 commentaires aucun rtrolien
Effet Grunge sur vos images avec photoshop cs4
Pour commencer importez votre image dans photoshop

les rglages et les valeurs ne sont pas fixe a dpend de la quantit de la lumire et de la
couleur sans oublier la taille
j'ai choisi la photo de cette magnifique volkswagen (Tlchargez l'image en grande
taille).
Pour commencer dupliquez votre calque Ctrl+J
Puis allez dans Menu > Image > Couleur Automatique (Shift+Ctrl+B)
Maintenant allez dans Menu > Image > Rglages > Correspondance de la couleur et rglez
comme ce si
Ensuite allez dans Menu > Filtre > Dformation > Correction de l'objectif et rglez comme
ce si
Dans le panneau des calques, cliquez sur l'onglet Couches , puis sur la couleurRouge .
Puis allez Menu > Images > Rglages > Luminosit / Contraste . Mettez un fort
contraste (+100).
faite la mme chose pour la couche Vert

voil le rsultat
Maintenant dupliquez votre calque (Ctrl+J) et allez dans menu > Filtre > Attnuation >
Flou de surface
Ensuite allez dans Menu > Image > Rglages > Dsaturer
changez le mode de fusion de ce dernier en Incrustation
Et voil le rsultat
COMMENT CRER UN
MODLE
D'HBERGEMENT WEB
affaireschangementd'hbergementmise en pageweb
Aujourd'hui va vous montrer comment crer un autre accrocheur mise en page

d'accueil. Dans ce tutoriel, je vais utiliser seulement 2-3 couleurs, avec de
petites variations, et vous pouvez utiliser cette disposition pour toute entreprise
Internet que vous avez. bien sr, vous avez besoin de faire de petits
changements.
Pour commencer, nous aurons besoin de crer un nouveau document. la taille
est comme toujours 1000 1100 pixels, et je vais crer ce document avec un
fond blanc.
je vais choisir l'instrument de rectangle, et je vais crer deux formes. Pour le
sommet de sa forme je vais utiliser la couleur suivante: # 393e43, et pour celle
du bas, je vais utiliser une autre couleur: # 373a3e
Ensuite, je vais crer un autre formes comme dans l'image ci-dessous. S'il vous
plat cliquer pour voir l'image en taille relle.
Comme vous pouvez le voir j'ai des styles de calque appliqus aux couches:
Avec l'outil Forme personnalise, je vais ajouter quelques flches. Et je vais

ajouter le mme style de calque comme ci-dessus.
Maintenant, je vais crer un bouton, avec l'outil rectangle arrondi.
Pour ce bouton, je vais ajouter les styles de calque suivants.
C'est ainsi que mon bouton va ressembler.
Je mettrai ma couleur de premier plan # 25272a, et je vais crer deux formes

avec l'outil rectangle arrondi. s'il vous plat cliquer sur l'image ci-dessous pour
voir la pleine dimension.
Pour les deux formes que je vais ajouter les styles de calque suivants.
Ceci est mon rsultat
Au cours de la pleine forme je vais ajouter un autre formes, et je vais utiliser les
mmes styles de calque. ici je vais crer les plans d'hbergement. Si vous avez
plus de trois plans que vous pouvez crer d'autres formes.
Avec l'outil de type horizontal, je vais ajouter un peu de texte, et dans le mme
temps, je vais ajouter quelques images avec certains serveurs. s'il vous plat
cliquer sur l'image ci-dessous pour voir l'image en taille relle.
J'ai utilis la police suivante: Myriad Pro (en italique)

Au milieu de la mise en page je vais ajouter une image gentille et un autre texte.
Ma dernire tape consiste crer un champ de recherche, o vos clients seront

en mesure de rechercher des noms de domaine disponibles. Je vais utiliser le
mme style de calque j'ai utilise pour le bouton.
Dans le pied de page de la mise en page, je vais y ajouter une autre forme
(utiliser les mmes styles de calque comme ci-dessus), et un peu de texte. Ceci
est mon rsultat final. J'espre que vous l'aimez.
Voulez tlcharger TOUS Grafpedia Tlchargements y compris cette disposition

PSD en couches?Inscrivez-vous pour un compte VIP et vous serez en mesure
de tlcharger 70.000 articles + vous aurez 12 mois mises jour gratuites.
Concevoir un portefeuille
moderne Mise en page Web
dans Photoshop
12 mai 201018 CommentairesPar Matthew Heidenreich
Je vais vous promenant travers la cration d'une page web

amnagement contemporain qui est parfait pour un site portfolio
personnel ou de l'organisme.Nous utilisons des outils simples tels
que Photoshop styles de calque, des outils de slection et outils de
forme personnalise pour crer une conception de sites Web de
niveau professionnel. La palette de couleurs peut facilement tre
ajuste en fonction de vos gots. Cette disposition est fortement
inspir par la conception de sites Web de MetaLab .
Avant-premire
Cliquez sur l'image d'aperu ci-dessous pour voir la mise en
page pleine chelle .
tape 1: Configurez votre toile Photoshop

La premire chose que nous devons faire est de crer un nouveau
document de 1024x900px. Ce sera une bonne taille de travail pour
une mise en page web.
En utilisant votre outil Pot de peinture (G), remplissez le calque

Arrire-plan blanc par dfaut avec une couleur bleu fonc (#
0b2533).
tape 2: Crer la page web tte forme

Maintenant, allez dans votre panneau Outils et choisissez votre outil
Rectangle arrondi (U). Rglez le Rayon dans la barre des options
10px.
Faire une forme de rectangle arrondi au sommet de notre toile qui
est sur 970px de largeur qui servira de notre tte / tte de mt pour
la mise en page. Centrer horizontalement l'aide de l'outil
Dplacement (V).
tape 3: Ajouter des styles de calque la

couche en-tte de forme
Maintenant, nous voulons ajouter quelques styles de calque pour le
rectangle arrondi nous avons fait. Cliquez-droit sur votre couche de
rectangle arrondi dans le panneau Calques, puis choisissez Options
de fusion dans le menu pour ouvrir les styles de calque fentre de
dialogue.
Ajouter un style de calque Gradient Overlay pour donner notre
tte sa couleur mtallique orange.
tape 4: Crer le nom du site / logo

En utilisant une police simple, (j'ai utilis Fruitger pour le logo
et Myriad Pro pour le slogan), sortir l'outil Texte horizontal (T) et
posez votre logo sur le ct gauche de notre tte. Assurez-vous
que votre nom de site et le slogan sont sur des couches de texte
spars de sorte que vous pouvez les dplacer indpendamment
les uns des autres.
tape 5: Crer le biseau en haut sur la

tte
Ctrl / Cmd + clic sur votre couche de rectangle arrondi pour faire un
rectangle de slection autour de lui automatiquement.
Remplissez votre slection avec du blanc (#ffffff) sur un nouveau
calque.
Alors qu'il tait encore slectionn, dplacez votre slection en bas
un coup de pouce (environ 1px 2px ou en fonction de la taille que
vous voulez le biseau de l'tre) avec l'outil Dplacement (V), puis
allez dans Edition> Effacer.
Allez-y et changer le mode de la couche la lumire douce de

mlange, puis abaissez l'opacit 65%.
tape 6: Faire le bouton de la barre de

navigation principale
Le temps de faire notre menu de navigation. Utilisez votre outil
Rectangle arrondi pour faire une petite forme de rectangle arrondi
sur le ct suprieur droit de l'en-tte.
Utilisez votre outil Rectangle (M) pour faire une slection au

sommet de la forme, puis choisissez Edition> Effacer (ou appuyez
sur la touche Suppr).
tape 7: Ajouter des styles de calque sur

le bouton de la barre de navigation
Ensuite, nous allons le style de notre bouton de la barre de
navigation. Nous le ferons en ajoutant un style de calque Ombre
porte et un style de calque Gradient Overlay.
Dposez style de calque Ombre
Le style de dgrad de la couche de recouvrement
tape 8: Crer l'effet 3D sur le bouton de

la barre de menu de navigation
En utilisant votre outil Lasso polygonal (L), faire une slection
triangulaire sur le ct gauche de la touche pour donner
l'impression qu'il est suspendu sur la tte.
Remplissez la slection avec une couleur bleu-gris (# 657681).
tape 9: Donnez le bouton une lueur

radiale
Utilisez votre outil Rectangle de slection elliptique avec Plume
environ 15px de faire une slection dans le centre du bouton.
Sur un nouveau calque, remplissez la slection de blanc (#ffffff).

Changer le mode de fusion de la couche de Lumire douce et
rduire l'opacit environ 52%.
Sur la couche de forme de la touche (pas la couche luminescente
radiale), Ctrl / Cmd + clic sur le calque pour le slectionner.
Ensuite, inverser la slection en allant Slection> Intervertir (Maj +
Ctrl / Cmd + I).Choisissez votre radiale couche luminescente de
nouveau, et appuyez sur votre touche Suppr pour supprimer les

zones l'extrieur de la touche.
Etape 10: Ajouter l'effet 3D fond sur le

bouton
Encore une fois, nous devons Ctrl / Cmd + clic de la couche de
forme de notre bouton faire une slection autour d'elle.
Puis, sur un nouveau calque (en dessous de la couche
luminescente radiale, mais au-dessus de la couche de forme du
bouton), remplissez la slection de blanc (#ffffff).
En utilisant votre outil Rectangle (M), faire une slection qui exclut
environ 5px-6px d'une partie de la touche infrieure.
Choisissez Edition> Effacer pour supprimer la partie suprieure du

rectangle blanc.
Allez-y et changer le mode de fusion du calque de superposition,
puis baisser l'opacit environ 44%.
Ajouter du texte (comme "Home") en utilisant l'outil Texte horizontal
(T) votre bouton.
tape 11: Assurez-boutons du menu de

navigation plus
Rptez le processus pour crer plusieurs lments de liaison pour
la barre de navigation principale. J'ai cr trois autres boutons de la
barre de menu de navigation.
Etape 12: Cration de la zone de contenu

de fond
Allons de l'avant et de faire le fond de notre zone de contenu. En
utilisant votre outil Rectangle (M), faire une slection qui s'tend sur
la largeur de votre tte et autour 460PX en hauteur.
Remplissez votre zone slectionne avec une couleur de lumire
bleu-gris (# b7c3c1).
Donnons la zone de contenu de fond un Gradient Overlay.
tape 13: Crer un encart horizontal 1px

sur l'en-tte
Passons revenir un peu la tte. Nous devons ajouter un peu de
brillance sur le fond de notre gradient d'orange. C'est une petite
chose, mais les dtails comptent.
Faites une slection 1px 1px haut partir du bas de la zone d'entte orange.
Sur un nouveau calque, remplissez la slection de blanc (#ffffff).
Changer le mode de fusion du calque sur Lumire tamise, et ce
que vous allez vous retrouver avec un bel effet 1px mdaillon.
tape 14: Crer la barre latrale sur la

gauche
Passons notre barre latrale. Faites une slection avec votre outil
Rectangle (M) sur le ct gauche de la zone de contenu; il devrait
tre d'environ 180px-200px de largeur.
Remplissez la slection avec n'importe quelle couleur (nous allons
utiliser les styles de calque pour la colorer en plus tard, de sorte que
la couleur que vous choisissez n'a pas d'importance ce point).
Ensuite, nous donnons la barre latrale une ombre interne et une

superposition des couleurs.
Style de calque Ombre interne
Style de calque Incrustation couleur
tape 15: Faire un diviseur vertical sur la

droite
Nous voulons crer une division verticale 1px entre notre barre
latrale et la zone de contenu principal.
Faites une slection pour le diviseur vertical 1px qui s'tend de haut
en bas, et, sur un nouveau calque, remplir avec la couleur grise (#
4a5452).
Puis baisser l'opacit de votre couche de sparation environ 37%.
Etape 16: Ajouter un titre de menu de

barre latrale
Utilisation de votre outil de type horizontal (T) et avec votre couleur
de premier plan mis avec une couleur bleu fonc (# 1e2e36),
ajouter un titre au sommet de notre barre latrale. J'ai utilis le texte
"Parcourir par catgorie".
Disons le style de la couche en-tte de texte avec un style de

calque Ombre porte qui lui donnera que populaire effet de texte
encadr / typographie .
tape 17: Faire l'encadr actif menu fond

Faites une slection avec votre outil Rectangle de slection (M)
juste en dessous de la "Recherche par catgorie" rubrique et
remplissez le de noir (# 000000). Cela servira de toile de fond pour
votre lien de catgorie active.
En utilisant votre outil Lasso polygonal (L), faire une slection de

telle sorte que le ct droit de la catgorie fond actif sera la forme
d'une flche pointant vers la droite.
Avec votre slection effectue, choisissez Edition> Effacer ou

appuyez sur la touche Supprimer pour supprimer la zone non
dsires.
Pour la couleur de la catgorie fond actif, nous allons utiliser un

style de couleur bleue couche Gradient Overlay.
Etape 18: Donner le fond de l'lment de

menu la frontire 1px
Ctrl / Cmd + cliquez sur votre calque pour le slectionner, puis
remplissez la slection de blanc (#ffffff) sur son propre calque. Vous
n'avez pas encore dslectionner (et si vous l'avez fait, il suffit
d'appuyer sur Maj + Ctrl / Cmd + D pour slectionner nouveau).
Aller Slection> Modifier> Contrat et, dans le contrat par option,
spcifiez 1px.
Ensuite, choisissez Edition> Effacer. Cela devrait donner notre
actif lien de catgorie fond un 1px bordure blanche autour de lui.
Baisser l'opacit du calque 40%, et de donner ensuite la frontire

1px un style bleu au blanc couche Gradient Overlay.
Utilisez votre outil Rectangle (M) de mettre une slection de ligne de

1px en bas de votre menu actif fond et remplissez le de noir (#
000000) sur un nouveau calque.
Baisser l'opacit du nouveau calque 15%.
tape 19: Concevoir le fond pour la

catgorie des liens non actifs
Nous voulons ensuite montrer comment nos catgories non-actifs
apparatront.Utilisez le outil Rectangle (M) pour placer une slection
ci-dessous notre catgorie active fond, puis, sur un nouveau calque,
remplissez-le avec une couleur gris trs fonc (# de 1f2324).
Pour la couleur de l'arrire-plan de la catgorie des liens non-actifs,

nous allons utiliser un style de calque Gradient Overlay.
Etape 11: Crer sparateurs horizontaux

entre des liens de catgorie
En utilisant votre outil Rectangle (M), faire une slection de 1px
haute qui agira comme sparateurs horizontaux entre les liens de
catgorie. Sur un nouveau calque, remplissez la slection de blanc
(#ffffff) et galement rduire l'opacit du calque environ 19%.
Etape 12: Ajouter la catgorie des noms

et des icnes
Tout ce qui reste la barre latrale est d'ajouter des icnes et du
texte. Je vous laisse trouver votre propre icne de favori met
utiliser (ou ne pas utiliser les icnes du tout). Il suffit d'utiliser l'outil
Texte horizontal (t) avec le jeu de couleurs blanc (#ffffff) pour
votre texte. La police que j'ai utilis tait Helvetica gras, au format
11 points.
Voil pour notre catgorie de la barre latrale des liens.
Etape 13: Ajouter une ombre sur le coin

suprieur droit de la zone de contenu
Faisons la zone de contenu un peu plus intressant en ajoutant une
ombre en haut droite de celui-ci. En utilisant votre outil Rectangle
(M) mettre une slection rectangulaire en haut droite et remplissez

le de noir (# 000000) sur un nouveau calque.
Ensuite, utilisez votre outil Rectangle de slection elliptique pour
couper la partie gauche de votre zone rectangulaire noire (appuyez
simplement sur la touche Suppr lorsque vous tes satisfait de votre
slection elliptique).
Aussi, aller de l'avant et de rduire l'opacit de ce calque environ

5%.
En utilisant votre outil Rectangle (M) de nouveau, faire une slection
en haut de la zone de contenu, juste en dessous de l'en-tte
orange.
Remplissez la slection avec du noir (# 000000), puis baissez
l'opacit de votre calque 12%.
tape 14: Faire la section contenu en

vedette
Avec votre outil Rectangle (M) mettre une slection vers la partie
suprieure de la zone de contenu, en laissant une certaine marge
sur tous les cts. Cette zone contiendra notre image de zone
slectionne, qui peut tre utilis pour promouvoir votre projet
prsent.
Remplir le contenu slection de la section de la zone slectionne
avec le noir (# 000000) sur un nouveau calque.
Pour styliser notre section de la zone de contenu prsent, nous

allons ajouter une ombre porte et un style de calque Gradient
Overlay.
Etape 15: Ajouter une image du projet

prsent et remplir contenu
Je suis all de l'avant et ajout un peu de remplissage pour une
image de projet slectionne titre et la description, ainsi que. Vous
pouvez utiliser, par exemple, vous tes fier d'une capture d'cran
d'un projet de conception. Utilisez un ipsum loremoutil de
gnrateur pour obtenir un contenu de texte combine avec l'outil
Texte horizontal (T).
Etape 16: Faire le bar "dtail"

Nous voulons maintenant faire un bar "dtail", qui est un lment de
l'interface utilisateur qui fonctionne comme un systme de
navigation pour nos images de projets prsents, en laissant vos
utilisateurs de faire dfiler votre travail, et de fournir un peu
d'information pour vos clients potentiels.
Utilisez votre Rectangle de slection pour effectuer une slection
rectangulaire court et large en dessous de la teneur en charge,
nous avons plac l'tape prcdente.Remplissez ce sera noir (#
000000).
Style de la barre "dtail" en ajoutant un dgrad de couleurs en

utilisant les styles de calque fentre de dialogue.
Ensuite, utilisez votre outil Rectangle (M) pour ajouter une bordure
haute 1px sur le dessus de votre barre. Assurez-vous que la
slection est 1px par le haut de la barre.
Sur un nouveau calque, remplissez la frontire 1px blanc (#ffffff) et
rduire l'opacit du nouveau calque environ 53%, ainsi que de
dfinir le mode de fusion Lumire tamise.
Etape 17: Concevoir les cercles de

progression sur la barre "dtail"
Utilisez votre outil Rectangle de slection elliptique tout en
maintenant la touche Maj enfonce pour faire un cercle vers le ct
gauche de la barre. Remplissez-le de blanc (#ffffff). Cela servira de
l'indication de qui prsentait projet l'utilisateur est actuellement en.
Ajouter une incrustation en dgrad pour le style du cercle.
Nous devons ensuite faire des cercles pour les articles nonactifs. Crez un autre cercle qui est la mme taille que le premier
cercle (ou dupliquer le premier cercle et il suffit de changer les
styles de calque celles mentionnes ci-dessous).
Ensuite, utilisez une ombre interne et un Gradient Overlay pour
donner l'lment non-actif cercle de couleur.
Style de calque Ombre interne
Ensuite, dupliquez le cercle que vous venez en revanche de

nombreux cercles d'articles non-actifs que vous
souhaitez. galement ajouter du texte et des icnes notre bar
"dtail".
Etape 18: Cration de la partie infrieure

de notre zone de contenu
Ajouter la partie infrieure de la zone de contenu l'aide 1px lignes
horizontales comme nous l'avons fait dans les tapes prcdentes
avec l'outil Rectangle.
Ensuite, utilisez votre outil Rectangle (M) faire une slection

autour de la zone du bas, puis le remplir avec une couleur bleu-gris
(# 8fa09d).
tape 19: Faire le pied de page

La dernire tape consiste crer votre pied de page. Utilisez votre
outil Rectangle arrondi (U) pour crer un rectangle en bas de votre
mise en page avec l'option Rayon fix 10px - assurez-vous que
cette couche est dans toutes vos autres calques sauf le calque
Arrire-plan.
Donner la zone de pied de page un style de calque Gradient

Overlay.
Suivant Ctrl / Cmd + cliquez sur votre calque de forme de rectangle

arrondi nouvellement cr dans le panneau Calques pour le
slectionner.
Sur un nouveau calque, remplissez votre slection avec du noir (#
000000).
Maintenant, pousser la slection (pas la couche, juste la slection)
en hausse d'environ 6px.
Choisissez Edition> Effacer et puis baisser l'opacit de ce calque

environ 19%.
Encore une fois, nous voulons Ctrl / Cmd + clic la couche de bas de
page de fond pour le slectionner et remplir la zone slectionne
avec le noir (# 000000) sur un nouveau calque.
Nous voulons ensuite utiliser notre outil Rectangle de slection
elliptique (M) de faire un droit de slection vers le milieu pour
donner le pied de sa surface d'aspect mtallique. Aprs la cration
de la slection, juste aller dans Edition> Effacer pour supprimer la
zone en son sein.
Baisser l'opacit de la couche d'environ 5%.

La dernire chose que nous devons faire est d'ajouter une petite
description de votre site portfolio en bas de page avec l'outil Texte
horizontal (T). J'ai utilis Helvetica, et une ombre porte et Gradient
Overlay options sur mon calque de texte.
Rsum Tutorial
Ce tutoriel vous a montr, tape par tape, et avec beaucoup de
captures d'cran, comment crer une mise en page Web d'aspect
moderne qui serait parfait pour un portfolio personnel ou de
l'organisme. La maquette PSD peut tre converti en une mise en
page HTML / CSS pleinement fonctionnel ou mme port une
plate-forme / publication de CMS comme Drupal ou
WordPress. Nous avons utilis des outils de Photoshop de base tels
que les outils de renom de slection, outils de forme, et les styles de
calque pour crer cette belle mise en page.
Crer un Web Design propre et

chic dans Photoshop
11 mars 201062 CommentairesPar Matthew Heidenreich
Dans ce tutoriel conception web, vous apprendrez comment crer

une mise en page Web lgant et professionnel qui peut tre utilis
comme un site portfolio web. Nous allons utiliser diffrentes
techniques de Photoshop, en s'appuyant sur des outils de base tels
que les outils de forme et styles de calque qui se traduira par une
conception de sites Web utilisable. En prime, nous avons inclus un
HTML / CSS / JavaScript kit graphique travail que vous pouvez
tlcharger et utiliser de quelque faon que vous le souhaitez,

gratuitement!
Avant-premire
Cliquez sur l'image ci-dessous pour voir la conception de sites Web
maquette l'chelle relle .
Dmo de travail
Cliquez sur l'image ci-dessous pour voir la dmonstration de
travail (que vous pouvez tlcharger au bas de ce tutoriel).
Ressources
Vector Social Media Icons par IconDock
Grungy Beige Naturel Photoshop par Webtreats
Brosses floraux par Vassili Orlov
Mono Icnes par Jason Cho
tape 1: Mettre en place le document

Photoshop
La premire chose que nous devons faire est de crer un nouveau
document Photoshop pour travailler avec. Pour cette conception
mise en page Web, crer un nouveau document avec les
dimensions de 1020x1180px .
tape 2: la barre de navigation fond

Nous voulons commencer l'en-tte et ensuite travailler notre
chemin notre pied.En utilisant votre outil Rectangle (M), crer un
rectangle de slection de chapiteau qui s'tend sur toute la largeur
de la toile; puis le remplir (Cmd / Ctrl + F5) avec une couleur gris
fonc ( # 393939 ).
tape 3: Esthtiques la barre de

navigation fond
Rpliquer la couche barre de navigation de fond que vous venez de
crer en appuyant sur Cmd + J; ce duplique la couche.
Appliquer un filtre de bruit (Filtre> Bruit> Ajout de bruit) sur la

couche en double;notons que nous devrions utiliser une distribution
de bruit uniforme de sorte que l'arrire-plan peut tre carrel pour
une utilisation ultrieure.
Ensuite, changer le mode de fusion de ce calque sur Recouvrement

et baisser l'opacit environ 23% .
tape 4: Crer logo / nom du site

Pour notre logo, j'ai utilis la police Gorgie rgl sur Bold
Italic . J'avais l'habitude blanc comme la couleur du texte
( #FFFFFF ) pour Six et une couleur beige-tan ( # F7E5C4 ) pour
Studios. Pour l'icne du logo / nom du site, j'ai utilis
le boxupload32icne de la libre Mono icnes figurant dans les

ressources en haut de cette page.
tape 5: Ajouter les liens du menu

Il est temps pour nos liens de navigation horizontale. Notre lien actif
va utiliser la couleur # DBD1BE , et nos liens non actifs
sera #ABAAAA .
Pour rendre notre lien actif se dmarquer un peu plus, faire un

rectangle arrondi derrire elle. En utilisant votre outil Rectangle
arrondi (U) partir du panneau Outils avec l'option set Rayon
de 5px et votre plan dfini # 464646 , faire une forme de rectangle
arrondi comme indiqu ci-dessous.
Sur votre calque de forme de rectangle arrondi, ajouter une ombre

interne et un style de calque de la course par un clic droit sur le
calque et choisir Options de fusion dans le menu contextuel.
Inner paramtres de l'ombre:
paramtres de l'AVC:
Etape 6: Ajouter le fond de la zone

slectionne
Sur la partie suprieure de notre mise en page Web, il y aura une
zone slectionne qui a un diaporama d'image de sorte que les
utilisateurs peuvent naviguer et voir travers vos uvres
prsentes. Cette zone abritera aussi une petite description sur
votre site. Pour dmarrer les choses, nous voulons utiliser notre
outil Rectangle (M) pour faire un rectangle qui reprsente l'arrire-
plan de cette zone slectionne, le remplir avec la couleur: #

D3CAB8 .
Ensuite, tlchargez et ouvrez le modle sale Beige Naturel

Photoshop (ou un motif de votre choix) dans Photoshop. Faites
glisser la texture sur votre toile principale, sur le fond de la zone
slectionne.
tape 7: Masquez les parties non dsires

de la texture de fond
Vous allez finir par avoir beaucoup de texture que nous ne voulons
pas tre montrant, si nous voulons masquer ce que nous n'avons
pas besoin. Pour ce faire, Cmd / Ctrl + clic sur la vignette du calque
d'arrire-plan slectionne dans le panneau Calques pour faire une
slection automatique.
Choisissez votre couche de texture partir de votre panneau
Calques, puis cliquez sur le masque Ajouter couche bouton au bas
de l'cran pour masquer tout mais la zone slectionne.
Puis modifier l'opacit de votre texture couche environ 35% de
laisser la couche ci-dessous montrent travers.
Utilisation de l'outil Texte horizontal (T), ajouter du texte dans cette

zone slectionne en utilisant Helvetica ou Arial . Assurez-vous de
mettre le texte d'en-tte et le corps du texte sur leurs propres
couches distinctes.
Pour notre rubrique texte, j'ai utilis le blanc comme couleur
( #FFFFFF ), et pour le corps du texte, une couleur gris clair ( #
2A2A2A ).
Pour pimenter le texte du titre, lui donner une ombre porte et un

dgrad de couleurs, ce qui produit un effet de type insert.
Baissez ombre:
Gradient paramtres de recouvrement:
tape 8: Crer le "A propos" bouton

arrondi de coin
Pour le "A propos" bouton d'interface, utiliser le outil Rectangle
arrondi (U) de nouveau avec un rayon de 5px . Le texte sur le
dessus de votre bouton peut utiliser la couleur de # 404040 .
Vous pouvez trouver l'icne de flche j'ai utilis (il est
appel circleright32 ) en Mono icnes . Redimensionner l'icne
pour s'adapter sur le bouton que vous avez cr en utilisant la
commande gratuit (Cmd / Ctrl + T) Transform.
Sur cette couche de forme de rectangle arrondi, ajouter une lueur

externe et un dgrad de couleurs pour rendre la forme plus
intressante.
Paramtres Lueur externe:
Gradient paramtres de recouvrement:
tape 9: Ajouter un lment de design de

florish
La dernire tape de ce ct-ci de notre rgion slectionne est
l'ajout d'un florish; un lment de design subtil qui amliore l'lgant
et chic look-and-feel de notre conception de sites Web. Tout
d'abord, tlchargez et installez le Floral Brosses Pack brosse
(numrs dans la section Ressources ci-dessus).
Rglez votre couleur de premier plan # 343434 avant d'appliquer
votre pinceau.
Choisissez l'outil Pinceau (B), trouver une pointe de pinceau floral

que vous aimez dans le pack de brosse, nous avons install, et
appliquez votre coup de pinceau en un seul clic.
Ensuite, changer le mode de fusion de la couche de Hard Light.
Etape 10: Cration de la zone de

diaporama
Laissez-nous travailler sur notre zone de contenu de
diaporama. Utilisez votre outil Rectangle arrondi (U) avec un plan
mis blanc ( # FFFFFF ) et un rayon de 5px pour gnrer une
forme de rectangle arrondi sur le ct droit de la mise en page Web.
Modifier le remplissage sur cette couche 15% de laisser une

partie de la trame de fond montrent travers, puis ajouter une
ombre porte sur la forme.
Etape 11: Ajouter une image de la zone de

diaporama
Nous devons ajouter une vignette notre bote ce
moment. Prendre une image que vous pouvez utiliser dans ce
domaine (comme une capture d'cran d'un site Web), et placez-le
sur la zone.
Nous voulons que les coins sont arrondis. Dans le panneau
Calques, Cmd / Ctrl + clic sur le vignette de prvisualisation de la
forme de rectangle arrondi pour faire une slection.
Toujours dans le panneau Calques, choisissez la couche avec votre
image sur elle.
Aller Slection> Modifier> Contrat et contracter le rectangle de
slection par 10px .
Ensuite, choisissez Slection> Inverser (Cmd / Ctrl + Maj + I) pour
inverser votre slection.
Pour donner l'image des coins arrondis, choisissez Edition>
Effacer.
Etape 12: Ajouter une description de

l'image tant reprsente
Ajoutons une description de l'image est actuellement affich dans la
zone de diaporama. Crer un cadre de slection autour de l'image
par Cmd / Ctrl + clic sur la vignette d'aperu de sa couche dans le
panneau Calques.
Aprs l'avoir slectionn, crez un nouveau calque et remplissez
votre slection avec du noir ( # 000000 ).
Ensuite, utilisez votre outil Rectangle (M) pour slectionner la partie
suprieure de votre rectangle noir arrondi nouvellement cr et
supprimez-le.
Baisser l'opacit de ce calque environ 75% de laisser votre image

couche spectacle travers.
Pour finir le tout, ajouter un peu de texte pour dcrire l'image en
utilisant l'outil Texte horizontal (T).
Etape 13: Ajouter un diviseur en bas de la

zone slectionne
La dernire tape de notre rgion slectionne est ajouter, une
sparation horizontale grise en bas de celui-ci. Nous voulons suivre
la mme mthode que les tapes 2 et 3 pour la cration de cette
division; la seule chose qui change est l'ajout d'une ombre interne
en elle.
Voici notre rgion slectionne dment rempli:
Il est temps de passer notre zone de contenu principal.
tape 14: Ajoutez de la couleur l'arrireplan de la zone de contenu principal

Tout comme vous l'aurez devin, notre zone de contenu abritera les
trois colonnes affiches dans l'aperu de notre conception de sites
Web. Nous ne voulons pas tre ennuyeux et laisser le fond blanc,
bien; afin de crer un rectangle de slection avec l'outil Rectangle
(M) qui s'tend sur toute la largeur de la toile, le remplir avec une
couleur blanc cass ( # FBF5EA ).
Notre zone de contenu va tre assez simple, mais simple, va un

long chemin si c'est fait correctement. Nous allons commencer par
le ct gauche ct o nous allons placer la liste des services.
tape 15: Ajoutez des titres de colonnes

Pour nos ttes de colonne, choisissez des reprsentations
symboliques de la teneur que la colonne aura des icnes
monochromes et les positionner gauche.
J'ai utilis la police Gorgie et une couleur gris fonc ( # 323232 )
pour le texte d'en-tte de colonne.
Ensuite, ajoutez une bordure infrieure ci-dessous les titres des

colonnes l'aide de l'outil Plume (P). Crer un chemin comme
indiqu ci-dessous.
Appliquer une course la voie d'abord fixer votre couleur de

premier plan la mme couleur que le texte ( # 323232 ). Ensuite,
trouver une belle pointe de pinceau avec l'option Diamtre de
Master 3 pixels .
Sur un nouveau calque, allez dans votre panneau Tracs (Fentre>
Chemins) et cliquez sur le chemin de la course avec une
brosse bouton au bas du panneau.
Ensuite, nous voulons donner un peu d'un gradient notre ligne

sinueuse. Pour ce faire, en ajoutant un style de calque incrustation
en dgrad.
Dupliquer votre couche lignes courbes (Ctrl / Cmd + J), et ensuite

un clin d'il 4 ou 5 pixels en dessous de la ligne d'origine.
Baisser l'opacit de ce environ 24% .
Etape 16: Ajouter du contenu la colonne

de gauche
Tout ce qui reste de la colonne de gauche est d'ajouter son
contenu. Notre couleur du texte d'en-tte est fix gris fonc ( #
323232 ). Pour le corps du texte, utiliser une teinte lisible de gris
(comme # 2A2A2A ).
Utilisez la mme procdure l'tape 8 pour faire les "Lire la suite"
boutons de l'interface. Cependant, pour la range du milieu, je
voulais changer la couleur, alors j'ai fait un gris de couleur unie ( #
484848 ) rectangle de prsenter mon tat stationnaire propose de
ces boutons dans la conception de sites Web maquette arrondi.

du milieu
Avec la colonne de gauche complet, il est logique de se dplacer
vers le centre. Crer la mme position que nous avons fait pour la
colonne de gauche, mais changer jusqu' l'icne avec celui que
vous trouvez appropri.
En utilisant votre outil Rectangle arrondi (U) avec un rayon de 3

pixels et une couleur de premier plan blanc ( # FFFFFF ), faire un
petit arrondi bote de contenu de coin et disposer du texte et la
description.
Ensuite, appliquez une lueur externe et une couche style de trait

votre bote de contenu de coin arrondi.
Paramtres Lueur externe:
paramtres de l'AVC:
Pour finaliser la bote de contexte de coin arrondi, ajouter une

image en fonction de votre description.

de droite
La colonne de droite est trs similaire la faon dont la colonnes de
gauche et de centre sont disposs. Nous voulons crer la mme
position pour les deux autres, en utilisant une icne diffrente qui
est symbolique du contenu de cette colonne.
Pour les liens non-actifs, j'ai utilis une couleur de police gris fonc
( # 353535 ). Pour nos liens actifs, j'ai utilis plaine, vieux blanc ( #
FFFFFF ). Derrire notre lien actif, j'ai cr un fond en utilisant l'outil
Rectangle arrondi (U) avec un 3px rayon et la mme couleur gris
fonc comme nos liens non actifs ( # 353535 ) pour le faire ressortir.
tape 19: Concevoir le widget la

newsletter
Ensuite, nous devons crer notre widget Newsletter. Utilisez votre
outil Rectangle arrondi (U) avec un rayon de 3 pixels pour crer la
bote. Dans cette bote de coin arrondi, appliquer le mme
processus que dans l'tape 2 pour crer le bruit, fond gris de sorte
que nous pouvons rutiliser l'lment de conception dans la barre
de navigation dans notre mise en page Web.
Tout ce que vous devez faire maintenant est d'ajouter du contenu

votre widget Newsletter. La police de la rubrique est Gorgie
italique , et l'icne est, encore une fois, de Mono icnes . J'ai plac
un style de calque Incrustation couleur en utilisant une couleur
beige ( # de F7E5C4 ) sur l'icne pour faire fondre dans un peu
mieux sur le plan de la couleur de notre mise en page Web.
Ensuite, il suffit d'utiliser votre outil Rectangle (U) pour faire un
rectangle arrondi pour servir de champ de saisie de l'adresse
lectronique de l'utilisateur; utiliser une couleur de remplissage de
blanc (# FFFFFF ).
C'est pour notre zone de contenu principal! Il est temps de passer

la dernire partie de notre mise en page Web: le pied de page.
Etape 20: Ajout de l'arrire-plan du pied

de page
Le pied de page va tre fait exactement comme l'arrire-plan entte de navigation de l'tape 2 et l'tape 3 Vous voulez faire un peu
plus grand que la navigation, bien que, de sorte qu'il peut accueillir
plus de contenu.
Etape 21: Ajouter le contenu du pied de

page
Ensuite, ajouter des liens vers notre pied. En utilisant votre outil
Rectangle (M), de crer un rectangle et le remplir avec une couleur
gris fonc ( # 323232 ). Ensuite, placez un texte de couleur blanche
( # FFFFFF ) dans la bote de votre lien.
Maintenant, changez le mode de la couche de votre rectangle de

lumire douce de mlange et baisser l'opacit 63% pour laisser le
fond du pied montrer travers.Rptez ce processus pour autant
de liens que vous avez besoin.
La dernire chose que nous devons faire est d'ajouter nos icnes
de mdias sociaux au-dessus du menu de navigation de notre bas
de page, puis ajouter le logo et le copyright texte sur le ct droit de
notre bas de page. Les icnes de mdias sociaux utiliss
proviennent des vectorielle Social Media Icons .
C'est tout!
Conclusion
J'espre que vous avez trouv ce tutoriel utile et facile suivre. Si
vous avez des questions, s'il vous plat n'hsitez pas demander
dans les commentaires. Si ce tutoriel vous inspire, montrer votre
travail dans le groupe de conception Instruire Flickr .
COMMENT CRER UN
MODLE BLEU WEB
PROPRE EN UTILISANT
PHOTOSHOP
blogbleupropremise en page
Dans ce tutoriel, je vais vous montrer comment crer une mise en page web bleu
propre dans Photoshop. Nous allons utiliser le systme de grille de
960 . Tlchargez, dcompressez l'archive et ouvrez le fichier "960_grid_24_col
2.psd" (vous trouverez ce fichier dans les modles> dossier Photoshop). Cacher
le groupe 24 Col Grille" et activez les guides (Affichage> Afficher>
Guides). Pour masquer rapidement de spectacle les guides, utilisez le
raccourci Ctrl / Cmd +; .
ETAPE 1
Tout d'abord, nous allons augmenter la taille de notre document. Allez dans
Image> Taille de la zone, dfinir la largeur de 1200px et la hauteur de 1160px.
Utilisez le pot de peinture (G) pour remplir le fond avec la couleur #
38434b. Faites un clic droit sur le calque Arrire-plan et slectionnez Convertir
en objet dynamique. Ensuite, allez dans Filtre> Bruit> Ajout de bruit et d'utiliser
les paramtres de l'image ci-dessous. Nommez ce calque "bg".
ETAPE 2
Slectionnez l'outil Texte (T) et d'crire le nom de votre mise en page dans le
coin suprieur gauche de votre document en utilisant la couleur # 93aaba. Jetez
un oeil l'image ci-dessous pour placer votre texte dans la bonne
position. Double-cliquez sur cette couche pour ouvrir la fentre Style de calque et
utiliser les paramtres de l'image ci-dessous.
ETAPE 3
Crer un nouveau groupe et nommez-le "bar de la recherche". Slectionnez
l'outil Rectangle arrondi (U), dfinir le rayon de 8px et crer un rectangle arrondi
sur le ct droit de votre mise en page en utilisant la couleur # cdd7de. Jetez un
oeil l'image ci-dessous pour rfrence. Double-cliquez sur cette couche pour
ouvrir la fentre Style de calque et utiliser les paramtres de l'image cidessous.Nommez ce calque "barre de recherche". Ensuite, slectionnez l'outil
Texte (T) et ajouter du texte dans votre barre de recherche en utilisant la
couleur # 526572.
ETAPE 4
Slectionnez l'outil Rectangle arrondi (U), dfinir le rayon de 8px et crer un
rectangle arrondi blanc comme celui que vous voyez dans l'image cidessous. Double-cliquez sur cette couche et utiliser les paramtres de l'image cidessous pour Ombre.
ETAPE 5
Utilisez l'outil Rectangle (U) pour crer un rectangle avec le 50px de hauteur et
la couleur # 7493a8 en haut du rectangle arrondi blanc. Ensuite, faites un clic
droit sur cette couche et slectionnez Crer un masque d'crtage.
Double-cliquez sur cette couche et utiliser les paramtres de l'image ci-dessous
pour Gradient Overlay.Nommez ce calque "barre de navigation".
ETAPE 6
Slectionnez l'outil Rectangle (U) et de crer un rectangle blanc sous la barre de
navigation. Ajouter un Gradient Overlay cette couche en utilisant les
paramtres de l'image ci-dessous. Laisser une distance de 1px entre la barre de
navigation et de ce rectangle. Nommez ce calque "gradient" et rglez son opacit
10%.
ETAPE 7
Slectionnez l'outil Ligne (U), rgler le poids de 1px et crer une ligne en bas de
la barre de navigation en utilisant la couleur # 506b7f. Nommez ce calque ligne
sombre 1px".
Appuyez sur Ctrl / Cmd + J pour dupliquer cette couche. Slectionnez l'outil
Dplacement (V) et appuyez sur la flche vers le haut une fois pour dplacer un
pixel vers le haut. Changez la couleur de cette ligne # 789ebb et nommez le
calque "de la ligne de lumire 1px".
ETAPE 8
Crer un nouveau groupe et nommez-le "navbar". Slectionnez l'outil Texte (T)
et d'crire le nom de vos articles navigation de menu en utilisant la couleur #
d8e9f5. Ajouter une ombre ces couches de texte en utilisant les paramtres de
l'image ci-dessous.
ETAPE 9
Crer un nouveau groupe et nommez-le "slectionne". Puis ajouter quelques
images et du texte l'intrieur du rectangle arrondi blanc. Jetez un oeil l'image
ci-dessous pour rfrence. J'ai utilis des images de paquets de vecteur de
Grafpedia. Pour le texte, j'ai utilis la couleur # 50728d.
ETAPE 10
Crer un nouveau groupe et nommez-le "flche droite". Ensuite, slectionnez

l'outil Ellipse (U) et de crer un cercle blanc sur le ct droit de votre rgion en
vedette.
Ensuite, slectionnez l'outil Forme personnalise, et de crer deux flches avec la
couleur # 38434b l'intrieur du cercle blanc.
ETAPE 11
Faites un clic droit sur le groupe "flche droite" et slectionnez Dupliquer le
groupe. Puis allez dans Edition> Transformation> Symtrie axe
horizontal. Dplacez ce groupe dans le ct gauche de la zone slectionne et
nommez-le "flche gauche".
ETAPE 12
J'ai utilis l'outil Texte (T) et la couleur # a8c4d8 d'ajouter un texte d'appel
l'action sous la zone slectionne.
ETAPE 13
J'ai utilis la outil Rectangle arrondi (U) et la couleur # 516c7f pour crer un
bouton ct du texte d'appel l'action. J'ai utilis les rglages suivants style de
calque.
ETAPE 14
Ensuite, j'ai utilis l'outil Texte (T) et la couleur # dfe6eb d'crire un texte
l'intrieur du bouton. J'ai aussi ajout une ombre et une incrustation en dgrad
de cette couche de texte en utilisant les paramtres de l'image ci-dessous.
ETAPE 15
Crer un nouveau groupe et nommez-le services. Slectionnez l'outil
Rectangle arrondi (U) et de crer un rectangle arrondi avec les dimensions 310px
par 250px. Activez les guides pour vous aider crer cette forme.
Double-cliquez sur cette couche et utiliser les paramtres de l'image ci-dessous
pour Ombre. Nommez ce calque services bg".
ETAPE 16
Slectionnez l'outil Rectangle (U) et de crer un rectangle avec le 40px de
hauteur et la couleur # 6c818f en haut du rectangle arrondi. Faites un clic droit
sur cette couche et slectionnez Crer un masque d'crtage. Ensuite, ajoutez un
Gradient Overlay cette couche en utilisant les paramtres de l'image cidessous. Nommez ce calque barre du haut".
ETAPE 17
Utilisez l'outil Texte (T) et la couleur # bed0dc d'crire le mot services en haut
de votre rectangle arrondi bleu. Puis ajouter une ombre cette couche en
utilisant les paramtres de l'image ci-dessous.
Tlchargez ces icnes vectorielles et ouvrez le fichier de .AI dans Adobe
Illustrator. Slectionnez ensuite l'une de ces icnes, copiez-le (Ctrl / Cmd + C),
revenir Photoshop et de le coller (Ctrl / Cmd + V) comme un objet
intelligent. Allez dans Edition> Transformation (Ctrl / Cmd + T), changer la taille
de l'icne et de le mettre en haut du rectangle arrondi. Nommez ce calque
"icne".
ETAPE 18
Slectionnez l'outil Texte (T) et crire un texte pour la zone "services". Jetez un
oeil l'image ci-dessous pour rfrence. J'ai cr les points de balle l'aide de
l'outil Ellipse (U).
ETAPE 19
Crez deux rectangles arrondis plus bleu pour les produits et Prsentation
des domaines tels que vous avez fait pour la zone "Services". Utilisez une
nouvelle icne pour chaque zone.
ETAPE 20
Ajouter quelques images pour la zone "Produits". Ensuite, ajoutez un effet double
course chaque image en utilisant les paramtres de l'image ci-dessous.
ETAPE 21
Slectionnez l'outil Texte (T) et crire un peu de contenu pour la zone "Qui
sommes-nous" en utilisant la couleur # 42525d.
ETAPE 22
Crer un nouveau groupe et nommez-le "blog". Ensuite, crez un nouveau
rectangle arrondi bleu comme celui que vous voyez dans l'image ci-dessous (j'ai
utilis les mmes couleurs et les styles de calque que j'ai utilis pour les petits
rectangles ci-dessus). Ajouter une icne en haut de ce rectangle arrondi et crire
le mot "blog" ct de lui.
ETAPE 23
Ajouter une image sur le ct gauche de votre zone de blog. Utilisez les
paramtres de style de calque suivants pour ajouter un effet double course
cette image. Ensuite, slectionnez l'outil Texte (T) et ajouter du contenu ct
de l'image.
ETAPE 24
Slectionnez l'outil Rectangle arrondi (U), dfinir le rayon de 4px et la couleur #
6b7881 et crer un petit rectangle arrondi comme celui que vous voyez dans
l'image ci-dessous. Nom "bouton" cette couche. Ensuite, utilisez l'outil Texte (T)
et la couleur # bec8cf d'crire les mots Continuer la lecture l'intrieur du
rectangle arrondi.
ETAPE 25
Ajouter un article plus l'intrieur de la zone de blog.
ETAPE 26
Slectionnez l'outil Texte (T) et crire une dclaration de droits d'auteur au bas
de votre mise en page en utilisant la couleur # 566671.
RSULTAT FINAL
Nous avons termin! J'espre que vous avez apprci ce tutoriel et que vous
avez appris de nouvelles choses. Comme vous pouvez le voir, actions vecteurs
icnes sont trs faciles utiliser lors de la conception d'une mise en page
Web. Et avec le compte VIP Grafpedia vous aurez accs tous les vecteurs de
Grafpedia.
Restez l'coute pour le prochain tutoriel!
22 avril 2010 6 Commentaires
Vous tes ici: Accueil disposition de site Web Tutoriels crer un modle d'affaires web dans
Photoshop
Bonjour. Aujourd'hui, je vais crer une autre mise en page Web (modle) dans Photoshop et
cette fois, je vais essayer de crer un modle d'affaires.
S'il vous plat noter que, dans ce tutoriel, je vais vous expliquer comment concevoir que cette
mise en page dans Photoshop, mais je ne vais pas couvrir la conversion PSD XHTML. Le
tutoriel sur la faon de coder cette mise en page en XHTML, il sera disponible sur notre PSD
en HTML Section rserves nos membres Premium
Cliquez ici pour voir le Live Preview (CSS / HTML)
Parce que cet aperu en direct a t chiffr, les navigateurs tels que Internet Explorer Ne sera
pas affich le site correctement, c'est pourquoi je suggre d'utiliser un navigateur web
moderne comme Firefox, Chrome ou Safari.
Ce problme ne se produit pas pour les fichiers non crypts qui sont disponibles pour
nos membres Premium .
SiteGrinder 3 va automatiquement convertir cette web modle de conception Photoshop

partir d'un PSD en HTML site / CSS - NO tranchage et pas les comptences de codage
requis! Cliquez ici pour en voir plus ...
Ouvrez Photoshop et crez un nouveau document (Ctrl + N), comme un fond choisir # edebe6
Je vais d'abord slectionner l'outil Rectangle et je vais ajouter une forme noire sur le haut du
document puis avec Type d'outils je vais ajouter le logo (police utilise: Tahoma).
O la droite du logo Je vais crer un formulaire de recherche, c'est pourquoi je vais

slectionner l'outil Rectangle et je vais crer une forme et je vais appliquer ces styles de
calque, puis avec Type d'outils, je vais crire Recherche:
Aprs avoir slectionn l'outil Rectangle je vais crer une petite forme sur le ct droit de la
forme cre l'tape prcdente, pour celui-ci je vais appliquer ces styles de calque:
Tout d'abord, slectionnez l'outil Rectangle et crer une forme verte, comme une couleur, j'ai
utilis # aed1c4
Avec l'outil Rectangle de crer une autre forme. J'ai utilis une couleur rouge pour la
dmonstration propose. Cette forme a les dimensions suivantes: 918 par 62px
Ensuite, appliquer certains styles de calque:
Ensuite, je vais ajouter les liens. Pour chacun d'eux, j'ai appliqu cette couche styles:
Avec l'outil Plume (P) Je vais crer un petit triangle sur la maison lien et je vais appliquer ces
styles de calque:
Ensuite, en utilisant l'outil de ligne je vais crer des sparateurs entre les liens. Pour crer ce
dont vous aurez besoin pour rgler le poids de l'outil de ligne de 1px
Je vais ajouter d'abord une ligne plus fonce (# de 8fafa4)
ensuite un blanc une (# aad4c6)
Ensuite, je ferai en sorte que les deux lignes sont slectionns sur ma palette des calques et je
vais cliquez sur Ctrl + E (pour les fusionner). Je vais dupliquer cette couche plusieurs fois
(d'avoir un sparateur pour chaque lien)
Suivant l'aide de l'outil Rectangle je vais crer une autre forme. En couleur, j'ai utilis #
d6e1c7 et j'ai appliqu cette couche styles:
Pour crer un bel effet 3D pour la navigation, en utilisant l'outil Plume (P) je vais crer cette
forme Grey:
Je vais crer un autre sur le ct droit, et voici mon rsultat:
Avec Type d'outil (T), je vais ajouter un peu de texte
Puis partir de mes images, je vais chercher une image d'entreprise. S'il vous plat noter que
lorsque vous ajoutez une image dans Photoshop, gnralement la rsolution est assez
lev. Tout ce que vous avez faire est de le redimensionner l'aide de transformation libre
qui peut tre activ en appuyant sur Ctrl + T de votre clavier.
Voici mon image
Maintenant, je vais slectionner rectangulaire Outil Marque (M) et je vais faire cette slection
sur ma photo:
Je vais clic droit sur mon image (ayant outil Rectangle de slection choisi) et je vais choisir
Feather
et je vais utiliser 50px pour Feather Radius.
Suivant un clic droit nouveau sur la slection mais cette fois je vais choisir Inverser la
slection
Je vais mettre en mode de fusion la luminosit et je vais baisser l'opacit 60%
Ensuite, je vais ajouter un bouton sur la rgion en vedette (en bas du texte). Pour ce faire, je
vais slectionner l'outil Rectangle et je vais crer une forme alors je vais ajouter cette couche
styles:
Ma sortie
Maintenant, je voudrais faire cette zone en vedette plus visible. Pour ce faire, je vais choisir
dans ma couche palette la forme principale utilise pour crer la rgion en vedette, et je vais
appliquer une Transformation (Ctrl + T), alors je vais appuyer sur ce bouton pour aller en
mode "Wrap"
Lorsque vous serez en mode "Wrap" une grille apparatra.
Voici slectionner ce coin, et avec votre souris glisser doucement un peu plus bas
Je ferai la mme chose pour le ct droit
Une fois que vous avez termin, appuyez sur ENTER

Mon rsultat
Avec l'outil Ellipse je vais ajouter cette forme:
La dernire tape pour vedette la rgion sera de crer des ombres. Pour que je slectionne
l'outil Ellipse et je vais crer cette forme
Ensuite, je vais aller au Filtre> Attnuation> Flou gaussien et je vais choisir pour rayon 10px,
alors je vais slectionner rectangulaire Outil Marque et je vais faire cette slection
Cliquez sur Supprimer Bouton de votre clavier puis appuyez sur Ctrl + D pour dcharger la
slection
Voici mon rsultat:
Ensuite, je voudrais ajouter une ombre au fond de la forme incurve. Malheureusement, je ne

peux pas crer une ombre agrable en utilisant la mthode standard - outil ellipse, c'est
pourquoi je vais utiliser l'outil Pinceau.
Tout ce que vous avez faire est de crer un nouveau calque sur votre palette des calques
(Ctrl + Alt + Maj + N) a choisi une brosse ronde, une couleur noire et suivre le bord de votre
forme.
Maintenant, appliquez un flou gaussien (Filtre> Attnuation> Flou gaussien) avec un rayon de
12px
Mon rsultat - une belle et douce ombre.
Celui-ci est vraiment facile de crer. Je vais d'abord avec l'outil Rectangle de crer cette
forme:
Ensuite, avec l'outil de type je vais ajouter un peu de texte
Le contenu est maintenant termin.

Celui-ci, est de nouveau trs facile de crer parce que c'est une rplique de la rgion en
vedette. J'ai utilis les mmes techniques utilises pour crer la rgion en vedette.
Avec Type d'outils, je vais ajouter un peu de texte et avec l'outil Rectangle je vais crer des
formes pour "Newsletter". Les boutons oranges utilisent les mmes styles de calque comme le
bouton de la rgion en vedette. Si vous m'avez suivi quand j'ai cr la rgion en vedette que
vous serez en mesure de crer le pied de page galement.
Cliquez ici pour voir le Live Preview (CSS / HTML)
Parce que cet aperu en direct a t chiffr, les navigateurs tels que Internet Explorer Ne sera
pas affich le site correctement, c'est pourquoi je suggre d'utiliser un navigateur web
moderne comme Firefox, Chrome ou Safari.
Ce problme ne se produit pas pour les fichiers non crypts qui sont disponibles pour
nos membres Premium .
PSD en HTML Tutoriel: Code d'un

fichier Photoshop un site Web de
travail
Publi dans WordPress Post le24 septembre 2012par Michael John Burns 33 Commentaires
Comme
Tweet
+1
Annoncez ici
Howdy, les gars! Dans ce tutoriel HTML PSD pour vous apprendre
coder la rapide et facile agence de design lgant Landing
page Dans Adobe Photoshop . Je ne suis pas vraiment dans le
codage, plus d'une personne de conception et ceci est mon premier
tutoriel de codage. Je ferai de mon mieux pour vous guider dans
l'ensemble. Nous allons coder cette partir de zro et par la fin
vous aurez une mise en page superbe et entirement fonctionnel
agence.
tes-vous prt? Commenons!
Hberger vos fichiers HTML sur BlueHost tre plus
professionnel ! Nous les recommandons!
Tlcharger des fichiers source
Les ressources de ce tutoriel
PSD Tlcharger
SlidesJS
Voir la dmo
Outils CSS: rinitialisation CSS

Temps et de patience :)
tape 1: Prparation de la PSD Tutoriel HTML
Nous savons tous que dans la conversion PSD en HTML / CSS,

nous aurons besoin d'aller et venir dans Photoshop (ou un autre
outil de retouche d'image) pour mesurer les tailles, la distance et les
couleurs. Donc, assurez-vous que vous ouvrez le fichier PSD dans
Adobe Photoshop.
Bien sr, vous aurez besoin de votre diteur de code et de
dbogage des outils prfrs. J'ai utilis Intype que mon diteur de
texte et les outils que je recommande dbogage Web Developer
Toolbar et Firebug .
Il est important de tester notre code en utilisant diffrents
navigateurs chaque tape du chemin afin que nous puissions
maintenir le cap de notre code. J'ai utilis CSS3 styles dans ce
tutoriel, qui devrait fonctionner dans Chrome et Firefox. Pour IE6
croyez-moi, il a toujours l'air bien.
tape 2: prparer les dossiers
Vous devrez crer un dossier de rpertoire et l'intrieur de celuici, vous devriez avoir / images rpertoire d'images et de / le
rpertoire pour JavaScript. J'ai plac le CSS fichier dans

la racine dossier, y compris le HTML fichier.
Nous avons galement besoin d'exporter les images utiliser dans
le fichier PSD. Par exemple, le Logo , vous devez slectionner le
calque du panneau Calques, copier et coller dans un autre
document et CTRL + ALT + MAJ + S pour enregistrer pour le web
et les appareils, le type de fichier appropri pour le logo devrait
tre png . Mais si vous tes fatigu de faire cela, vous pouvez
simplement tlcharger les fichiers et utiliser les images que j'ai
dj export.
tape 3: Mise en page de dmarrage simple
Pour construire notre mise en page HTML, nous devons d'abord

analyser notre conception en regardant la mise en page Photoshop
et identifier les sections qui sont uniques.
Contexte: vous remarquez que le fond est blanc.
Rubrique: Notez que dans cette section, la tte a une ligne

verte sur le dessus qui couvre la totalit de l'cran, de sorte que
pour ce faire, nous devons envelopper la tte avec un autre
conteneur. L'en-tte contient le logo, appel l'action, la navigation
et la recherche .
Faites attention la dnomination de id ou class dans chaque

capture d'cran que j'ai fait, ce seront les noms que nous utiliserons
lorsque nous balisage HTML.
Diapositives: pour le curseur, nous serons en utilisant SlideJS .
Service: cette section contient deux colonnes pour la conception

web et conception de vecteur .
Mdia: cette section est divise en 3 colonnes pour la vido,

Twitter et Facebook .
Remarquez la section ci-dessus diapositives, des services, et les

mdias sont positionns dans le centre, alors nous allons les
envelopper avec un div et nommez-lercipient .
Widget: cette section est divise en 3 colonnes pour les liens,

blog, et l'emplacement .Aussi, vous remarquerez qu'il est recouvert
d'un motif pointill gris qui couvre la totalit de l'cran.
Client: Dans cette section, vous remarquerez qu'il ya une bordure

grise solide sur le fond qui couvre la totalit de l'cran et une liste
de clients logo.
Pied de page: Enfin, le pied de page qui contient 2

colonnes pour le droit d'auteur, des liens de pied de page, et vers
le haut flche .
Voici l'image de la majoration globale que nous avons fait.
Maintenant, la base de ces notes, nous crons la mise en page

HTML suivante.
1 <! DOCTYPE html>
2
<html lang="en">
< tte >
<meta charset="utf-8">
< titre > Burnstudio </ titre >
< lien rel = "stylesheet" href = "style.css" >
</ tte >
8 < corps >

9
10
11
12
13
< div id = "header-wrap" >

< tte >
contenu d'en-tte va ici
</ tte >
</ div > <! - fin tte wrap ->
14
15
< div id = "conteneur" >
16
<div id="slides">
17
18
contenu des diapositives va ici

</ div > <! - de diapositives ->
19
20
21
22
23
<div id="service">
le contenu du service va ici
</ div > <! - service de fin ->
24
< div id = "media" >
25
26
27
le contenu des mdias va ici

</ div > <! - la mdiane ->
</ div > <! -! Rcipient d'extrmit ->
28
29
30
< div id = "widgets wrap" >

< div id = "widget" >
31
32
33
contenu widget de passe ici

</ div > <! - widget fin ->
</ div > <! -! fin de widgets wrap ->
34
35
36
<div id="client-wrap">
<div id="client">
37
38
39
contenu widget de passe ici

</ div > <! - client final ->
</ div > <! -! fin client Emballage ->
40
41
42
43
< footer >

contenu du pied de page va ici
</ footer >
44 </ corps >

45 </ html >
Notez que la dnomination des divs dans chaque section est base
sur la dnomination que nous avons fait plus tt, lorsque nous
avons analys la mise en page PSD. Notez que cette disposition est
une largeur fixe de 960px . Je sais que ce serait mieux si nous
avons utilis un framework CSS pour ce projet. Mais comme je l'ai

dit, nous allons le faire partir de zro.
tape 4: Travailler sur la section en-tte
Maintenant passons se concentrer davantage sur la section d'entte, nous allons marquer les lments HTML qui peuvent tre
trouvs dans cette section.
1
< h1 > < un href = "index.html" titre = "burnstudio" > Burnstudio </a >
</ h1 >
2 < div id = "appeler" >

3
4
< h3 > (012) 345 6789 </ h3 >

< h4 classe = "vert" > Appelez-nous < forte > maintenant </ fort>
</ h4 >
5 </ div > <! - fin de l'appel ->

6 <nav class="group">
7
8
<ul>
< li class = "Home" > < a href = "#" titre = "" > Accueil </a >
</ li >
< li > < un href = "#" titre = "" > Services </ a > </ li >
< li > < un href = "#" titre = "" > Qui
sommes-nous </ a > </li >
10
11
< li > < un href = "#" titre = "" > Tmoignage </ a > </ li >
12
<li class="last">
13
<div>
14
< entre de type = "text" nom = "rechercher" espace

rserv = "rechercher" />
15
< entre de
type = "submit" nom = "rechercher" valeur= "go" classe = "rechercher" />
16
17
</div>
</li>
18
</ul>
19 </nav>
Dans le code HTML ci-dessus Je viens de suivre ce que j'ai vu dans

Photoshop. Le premier est le logo , puisque le logo est cliquable j'ai
ajout < a> tiquette l'intrieur du h2 . Suivi par le numro d'appel
qui est envelopp dans un div avec un id de l'appel . Enfin, j'ai cr
un < ul>liste qui contient des liens et de la recherche .
Maintenant, nous allons ajouter le CSS comme suit:
Toutes les feuilles CSS doit tre ajout dans
le style.css fichier. Aussi, assurez-vous que vous venez de copier
la rinitialisation CSS qui j'ai fourni des ressources et de la placer
dansstyle.css fichier.
1 body {
2
fond : #fff ;
font-family : Helvetica , Arial , sans-serif ;
font-size: 13px;
5}
6
7 / * Styles de police * /
8h 3 {
9
font-size: 24px;
10
11
couleur : # 333333 ;
12
margin-bottom : 25px ;
13 }
14 h 4 {
15
16
font-size: 18px;
17
18 }
19 h 5 {
20
font-size: 14px;
21
22 }
23 p {
24
font-size: 13px;
25
couleur : # 555555 ;
26
line-height : 18px ;
27 }
28 a, a: link, a: visited {
29
text-decoration : aucun ;
30
dcrire : aucun ;
31 }
32 . verte {
33
couleur : # 509743 ;
34 }
35 . blanc {
36
couleur : #fff ;
37 }
38 forte {
39
40 }
font-weight : bold ;
41 / * POLICES END STYLES * /
Dans le CSS ci-dessus, puisque nous avons des styles de

rinitialisation nous avons besoin pour le style de nos formats de
texte. Je sais que nous avons utilis une police diffrente pour nos
rubriques et je ne pense pas les polices Google
soutiennent Kozuka gothique . Mais pour l'instant, nous allons le
remplacer par Helvetica . Remarquez aussi j'ai ajout les
classes verteset blanches, ce seront utilises lorsque nous style de
texte vert ou blanc qui peut tre vu dans la conception.
Lorsque vous testez vous aurez quelque chose qui ressemble la
capture d'cran ci-dessous.
1 / * TETE * /
2 # Header-wrap {
3
border-top : 10px solide # 4d9543 ;
padding-top : 40px ;
5}
6 tte {
largeur : 960px ;
marge : 0 auto ;
rembourrage : 0 ;
10 }
11 tte h 2 un {
12
affichage : bloc ;
13
text-indent : -999999px ;
14
fond : url (images / logo.png) no-repeat ;
15
largeur : 214px ;
16
hauteur : 77px ;
17
flotter : gauche ;
18
19 }
20
21 #call {
22
flotter : droit ;
23
border-right : 1px solide # c8c8c8 ;
24
padding-right : 25px ;
25
margin-top : 20px ;
26 }
27 #call h 3 {
28
marge : 0 ;
29 }
30 #call h 4 {
31
text-align : droit ;
32
marge : 0 ;
33 }
34
35 pas {
36
claire : les deux ;
37
largeur : 960px ;
38
hauteur : 50px ;
39
-moz-border-radius: 30px;
40
-webkit-border-radius: 30px ;
41
background-color : # 3b7c33 ; / * repli * /
42
border-radius: 30px ;
43
/ * Safari 4 +, Chrome 1-9 * /
44
background-image : -webkit-gradient (linaire, 0% 0% , 0% 100%,

partir de ( # 5fae53 ), ( # 3b7c33 ));
45
46
/ * Safari 5.1+, mobile Safari, Chrome 10 + * /

background-image : -webkit-linear-gradient ( top , # 5fae53 , #
3b7c33 );
47
48
/ * Firefox 3.6+ * /
background-image : -moz-linear-gradient ( top , # 5fae53 , #
3b7c33 );
49
/ * IE 10 + * /
50
background-image : -ms-linear-gradient ( top , # 5fae53 , # 3b7c33 );
51
/ * Opera 11.10+ * /
52
background-image : o-linear-gradient ( top , # 5fae53 , # 3b7c33);
53
frontire : 1px solide # 336c2b ;
54 }
55
56 nav ul li{
57
flotter : gauche ;
58
border-right : 1px solide # 336c2b ;
59
border-left : 1px solide # 78c368 ;
60 }
61 nav ul li.home{
62
border-left : aucun ;
63
64
fond : url (images / home.png) no-repeat 50% 50% ;
65 }
66
67 nav ul {li.last
68
69
border-right : aucun ;
70
flotter : droit ;
71
margin-right : 20px ;
72 }
73 nav ul li a{
74
affichage : bloc ;
75
rembourrage : 0 30px ;
76
hauteur : 50px ;
77
78
font-size: 15px;
79
couleur : #fff ;
80
text-shadow : 0 1px 0 # 387031 ;
81 }
82 nav ul li a: hover {
83
fond : # 5fae53 ;
84 }
85
86 nav ul li.home a: hover {
87
-webkit-border-top-left-radius: 30px ;
88
-webkit-border-bottom-left-radius: 30px ;
89
border-top-left-radius: 30px ;
90
border-bottom-left-radius: 30px ;
91
fond : # 5fae53 url (images / home.png) no-repeat 50% 50% ;
92 }
93 nav ul li div input[type=text]{
94
-webkit-border-radius: 20px ;
95
-moz-border-radius: 20px;
96
fond : # 4b9241 ;
97
98
border-right : aucun ;
99
border-bottom : 1px solide # 5ead52 ;
100
border-top : 1px solide # 346d2c ;
101
couleur : #fff ;
102
text-shadow : 0 1px 0 # 387031 ;
103
rembourrage : 5px 0 5px 20px ;
104
largeur : 200px ;
105 }
106 nav ul li div entre [type = text]: focus {
107
108 }
dcrire : aucun ;
109
110 / * Le style PLACE PORTE * /
111 :: - Webkit-entre-espace rserv {
112
couleur : #fff ;
113 }
114 :-Moz-rserv {
115
couleur : #fff ;
116 }
117
118 nav entre ul li div [type = submit] {
119
fond : url (images / search.png) no-repeat 50% 50% ;
120
frontire : aucun ;
121
122
margin-left : 15px ;
123
hauteur : 50px ;
124
largeur : 16px ;
125 }
126
127 / * FIN-TETE * /
Dans le CSS ci-dessus Je style tte-wrap avec une bordure verte

de 10px, depuis un div par dfaut est de style dans
un bloc d'affichage, cela remplira toute la largeur de
l'cran. Ensuite, j'ai centr la tte avec margin: 0 auto . Ensuite, Je
style du logo avec une largeur et une hauteur fixe. J'ai aussi flottais
il gauche. Pour l' appel je flottais droite et appliquer une bordure
grise 1px aussi un rembourrage de 25px de droite. Notez que pour
obtenir cette valeur, vous devez revenir Photoshop et utiliser
l' outil Rgle (I) pour mesurer la distance. Depuis que j'ai appele
le H3 et H4 avec une marge infrieure 25px dans notre format de
texte de base, nous devons le remettre zro et changer 0. Cela
rendra le h4 et h3 dans la section d'appel de retour la normale.
Ensuite, Je style de la navigation avec une largeur fixe, la hauteur
et une pente, j'ai appliqu une fois pour effacer le dessus flottant
lments clairement logo et appel . Tous li flottent gauche, sauf
pour le dernier lment li, aussi il a une frontire gauche et droite,
sauf pour la la maison il ya pas de frontire gauche et pour la
dernire, il n'y a pas de frontire droite. Tout unrembourrage de
30px est de style de gauche et de droite 0 pour haut et en bas,
d'une hauteur de 50, une ombre du texte, un line-height de 50
rendre centrer verticalement. Pour la classe la maison j'ai pouss
sur le texte et le remplacer par l'icne de la maison. Depuis le coin
est arrondi nous avons besoin de spcifier un autre vol stationnaire
de style pour le bouton d'accueil que ce que j'ai fait en dessous de
la a: hover .
Enfin, Je style l'entre de recherche avec un rayon arrondi, un fond
vert, bordure noire sur la bordure suprieure et de la lumire sur le
fond. Aussi pour cibler espace rserv attribut reportez-vous la
CSS qui je commente le lieu porte de style c'est une partie de la
proprit de CSS3.
Avant de prvisualiser ce IE versions infrieures assurez-vous de
copier et coller le code ci-dessous dans la section d'en-tte de notre
fichier HTML. Cela permettra lments HTML5 pour travailler dans
les anciens navigateurs IE.
1 <! - [If IE]>
2
<Script type = "text / javascript">
(Function () {
var = html5elmeents
"address|article|aside|audio|canvas|command|datalist|details|dialog|figure
|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|
section|time|video".split('|');
5
for (var i = 0; i <html5elmeents.length; i ++) {
document.createElement (html5elmeents [i]);
) ();
10
11
</ Script>
<![endif]-->
Maintenant, notre modle doit ressembler cela.
tape 5: Travailler sur la section Curseur
Maintenant, nous allons ajouter du contenu l'intrieur

du diapositives lment, voici le code HTML.
1 < div class = "slides_container" >
2
3
4
<div>
< img src = " http://www.1stwebdesigner.com/wpcontent/uploads/2012/09/slide1.png " alt = "slide1" />
< div class = "slide-droit >
< h1 class = "slide-rubrique > Artthatworks 1 dolor sit amet,

consectetur adipiscing elit. </ h1 >
< p class = "info" > C'est une plate-forme lorem.Choisissez

une large gamme de produits d'exploitation. Parce que la trs grande, mais
pas toujours et les mchoires, et le porche de la Chine runis. Peu

importe le cours des comptences de la criminalit et moteur chez les
patients de football maintenant. </ p >
< p > < un href = "#" classe = "lire la suite" > Lire la suite
</ a > </ p >
8
9
</div>
</div>
10
11
12
13
14
<div>
< h1 class = "slide-rubrique > Artthatworks 2 dolor sit
amet, consectetur adipiscing elit. </ h1 >

une large gamme de produits d'exploitation. Parce que la trs grande,
15 mais pas toujours et les mchoires, et le porche de la Chine runis. Peu
16
17
18
< p > < un href = "#" classe = "lire la suite" > Lire la
suite </ a > </ p >
</div>
</div>
19
20
21
22
23
<div>
< h1 class = "slide-rubrique > Artthatworks 3 dolor sit
amet, consectetur adipiscing elit. </ h1 >

24 une large gamme de produits d'exploitation. Parce que la trs grande,
mais pas toujours et les mchoires, et le porche de la Chine runis. Peu
25
< p > < un href = "#" classe = "lire la suite" > Lire la
suite </ a > </ p >
26
27
</div>
</div>
28 </ div > <- conteneur de fin ->
Dans le balisage HTML ci-dessus j'ai ajout une

classe slides_container ce tiendra nos lments de diapositives
qui est envelopp par un div qui contient une image, une div class
dediapositives droite qui dtient le titre de la diapositive, info, et en
savoir plus lien. Aussi, j'ai ajout une classe pour la rubrique slidetitre , paragraphe infos et pour le lire plus readmore .Ce sera utile,
car nous allons rpter le code HTML 3 fois et ils auront les mmes
styles si l'on ajoute le CSS plus tard.
Maintenant, nous allons le style tout l'lment, voici le CSS.
1 #container {
2
largeur : 960px ;
marge : 0 auto ;
4}
5 / * COULISSES * /
6 #slides {
7
Position : rapport ;
margin-top : 40px ;
9 }
10 .slides_container {
11
12 }
hauteur : 315px ;
13 .slide- droit {
14
Position : absolue ;
15
top : 0 ;
16
gauche : 385px ;
17 }
18
19 .slide-titre {
20
fond : url (images / slide-heading.png) no-repeat ;
21
largeur : 494px ;
22
hauteur : 68px ;
23
couleur : #fff ;
24
font-size: 24px;
25
26
padding-left : 80px ;
27
margin-top : 35px ;
28
29 }
30 .slide- droit .info {
31
largeur : 395px ;
32
33
34 }
35 .slide- droit .readmore {
36
37 }
38 .readmore {
39
font-style : italic ;
40
text-decoration : aucun ;
41
couleur : # 509743 ;
42
43
fond : url (images / more.png) no-repeat 0 50% ;
44 }
45 .readmore: hover {
46
couleur : # c8c8c8 ;
47
48 }
49 .pagination {
50
51
bas : 25px ;
52
gauche : 25px ;
53
z-index: 99;
54 }
55
56 ul.pagination li{
57
flotter : gauche ;
58
59
fond : url (images / pagination.png) no-repeat ;
60
background-position : top ;
61
largeur : 14px ;
62
hauteur : 15px ;
63 }
64 ul.pagination li.current{
65
background-position : en bas ;
66 }
67 ul.pagination li a{
68
affichage : bloc ;
69
70 }
71
72 a.next {
73
74
droit : 25px ;
75
bas : 30px ;
76
affichage : bloc ;
77
largeur : 7px ;
78
hauteur : 13px ;
79
fond : transparent url (images / prev-next.png) no-repeat ;
80
background-position : top droit ;
81
82 }
83 a.prev {
84
85
droit : 50px ;
86
bas : 30px ;
87
affichage : bloc ;
88
largeur : 7px ;
89
hauteur : 13px ;
90
fond : transparent url (images / prev-next.png) no-repeat ;
91
background-position : top gauche ;
92
93 }
94 a.next: hover {
95
background-position : en bas droite ;
96 }
97 a.prev: hover {
98
background-position : en bas gauche ;
99 }
100 / * COULISSES DE FIN * /
Dans le CSS ci-dessus depuis des diapositives, le service et les

mdias sont envelopps avec le conteneur div, nous allons le style
de cette premire rendre centres. Ensuite, tobogganposition
est mis par rapport en faire l'lment parent. Ceci est utile afin
que nous puissions placer les lments l'intrieur prcdent,
suivant, et la pagination qui sont absolument gnr
automatiquement par le JavaScript. Pour la slides_container J'ai
donn une hauteur fixe de 315px qui est gale la hauteur de
l'image de curseur. Pour la glissire de droite qui contient le titre,
l'information et en savoir plus, tous positionns absolument, 0 en
tte, et il a pouss 385px de gauche.
Pour le slide-rubrique je lui ai donn une largeur et une hauteur
fixe gale l'image d'arrire-plan, et lui a donn un rembourrage de
faire le align texte correctement, galement une marge de donner
un espace et l'aligner correctement. Pour .info je lui ai donn une
largeur fixe avec une marge pour l'aligner. Pour .readmore dbut,
je lui a donn un style de marge distincte puisque seul le readmore
curseur a le ce et tous les liens de readmore dans la mise en page
n'a pas de marges de gauche. Puis suivi par le style de readmore

qui a une couleur verte avec un fond flche et un vol stationnaire
gris.
Pour la pagination, prev , et prochaines boutons: auto-gnr par
le JavaScript afin de coiffer ce nous devons d'abord identifier ce qui
est le tag ou le html applique attribut de classe .Pour ce faire,
vous devez utiliser le Firebug outil si vous utilisez Firefox, si vous
utilisez Chrome juste un clic droit sur l'lment et cliquez
sur Inspecter l'lment d'un dialogue apparat et vous pouvez y voir
ce que l'lment est utilis.
Maintenant que vous savez l'lment, nous allons cibler dans le
CSS. Pour la pagination J'ai plac absolument, le mis 25px du bas
et de gauche, aussi j'ai postul z-index 99px - ce qui fera la
pagination droit sur le trs haut par rapport aux autres lments. Si
Werre ne va pas appliquer le prsent avis qu'il n'est pas cliquable,
car l'image est au-dessus de la pagination lui-mme. Puis je flottais
les pagination li lments gauche, il a donn une bonne marge de
10px, a ajout une image de fond avec une largeur et une hauteur
fixe. J'ai plac l'arrire-plan par dfaut de la page, car l'image de
l'tat normal est sur le dessus, pour le courant ou l'tat actif nous
allons inverser le positionnement de haut en bas et enfin l'afficher
comme un lment de niveau bloc et masquer le texte. Pour
la .next et .prev peu prs le mme que nous avons fait dans la
pagination, mais cette fois, il est positionn droite. Remarqu
la prev-next.pngsur le ct gauche il contient l'image du bouton
prev et sur le ct droit il contient l'image du bouton ct. J'ai
plac la .next l'image en haut droite, .prev positionn en haut
gauche, et pour le vol stationnaire juste changer le haut en bas.
Maintenant, nous allons ajouter le script jQuery requis dans l'entte. Copiez leslides.min.jquery.js fichier partir de la source
/ rpertoire et de le coller dans notre / jsrpertoire.
< scnario src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquer

y.min.js " > </ script de >
2 < scnario src = "js / slides.min.jquery.js" > </ script de >
Enfin, nous devons ajouter le code JavaScript qui permettra le

curseur de travailler sur notre mise en page. Vous devez ajouter ce
script juste avant la balise </ body>. Voici le JavaScript.
1 < scnario >
2
$ (Function () {
$ ('# Diapositives ). Diapositives ({
prcharge: vrai,
generateNextPrev: true,
6
7
});
});
8 </ script de >
tape 6: Travailler sur la section service
Maintenant, nous allons ajouter du contenu l'intrieur du service

de l'lment, voici le code HTML.
1 < div id = "Web" >
2
< img src = "images / web.png" />

< h3 > Web < forte > < dure classe = "vert" > Conception </dure >
</ fort > </ h3 >
< p > Maintenant viverttra et laide bio diesel. E-commerce,

4 l'ordinateur portable de l'adaptateur sur la frange de la cuve, un seul
sport le plus excitant intressante, cette poussire l'emballage. </ p >
< p > < un href = "#" classe = "lire la suite" > Lire la suite </a >
</ p >
6 </ div > <! - fin web ->

7
8 < div id = "btons" >
9
10
< img src = "images / vector.png" />

< h3 > Vecteur < forte > < dure classe = "vert" >
Conception </dure > </ fort > </ h3 >
< p > Maintenant viverttra et laide bio diesel. E-commerce,

l'ordinateur portable de l'adaptateur sur la frange de la cuve, un seul
11
sport le plus excitant intressante, cette poussire l'emballage.
</ p >
12
< p > < un href = "#" classe = "lire la suite" > Lire la suite </a >
</ p >
13 </ div > <! - vecteur de fin ->
J'ai cr un div id unique Web et vecteur qui contient les mmes

lments comme une image, les titres, les paragraphes et lien
readmore. Dans la rubrique, vous pouvez voir, j'ai ajout une dure
et appliqu une classe de vert puisque le cap est combin avec une
couleur diffrente.Pour le plus lu lien nous appliquons la mme
classe que nous avons fait dans la zone du curseur.

1 / * SERVICE * /
2 #service {
3
margin: 40px auto;
hauteur : 253px ;
fond : url (images / service bg.jpg) no-repeat ;
7}
8
9 #Web {
10
flotter : gauche ;
11
largeur : 450px ;
12
13 }
14 #Web p {
15
largeur : 260px ;
16
17 }
18 #Web img {
19
flotter : droit ;
20
21 }
22 #vector {
23
flotter : droit ;
24
25
largeur : 450px ;
26 }
27
28 p {#vector
29
largeur : 260px ;
30
31 }
32 #vector img {
33
flotter : droit ;
34
35 }
36 / * FIN SERIVCE * /
Je style du Service div 40px du haut vers le bas et ajout une auto
gauche et droite, j'ai galement ajout une hauteur qui est gale
l'image de fond. Pour le web div je flottais vers la gauche et lui a
donn une largeur de 50% de la div parent, mme avec
le vecteur div mais flottais vers la droite. Pour le paragraphe que je
lui ai donn une largeur fixe avec une marge, pour l'image que je
flottais droite et lui donner une marge de droite, peu prs la
mme sur l'image de vecteur et texte.
tape 7: Travailler sur les mdias Section

du mdia lment, voici le code HTML.
1 < div id = "medium" classe = groupe >
2
< div id = je vois >
< h4 > rapide < forte > Tour Vido </ fort > </ h4 >
< h5 > Comment nous concevons nos uvres! </ h5 >
5
6
< un href = "#" classe = "Play" > < img src = "images /
play.png" alt = "Play" /> </ a >
</div>
7
8
< div id = "Twitter" >
< h4 > Twitter < forte > < dure classe = "vert" > RSS </dure >
</ fort > </ h4 >
< p class = tweet > Mashable Vido: Dmission principaux aprs

avoir prtendument faisant passer pour un tudiant sur Facebook 10
< un href = "#" classe = "t-lien" > http://on.mash.to/IVYWYJ</ un >
</ p >
11
12
< p class = "temps" > Il ya 9 heures </ p >

</div>
13
14
15
< div id = "facebook" >

< h4 > Nous rejoindre sur < forte > < dure classe = "vert" >
Facebook </ dure > </ fort > </ h4 >
16
17
</div>
18 </ div > <! - la mdiane ->
J'ai cr 3 sections diffrentes: vido div qui contient du texte

rubriques h4, h5 et une image cliquable pour bouton de
lecture, twitter div qui contient un titre et un paragraphe, enfin
unfacebook div qui contient un titre et si vous souhaitez ajouter
votre widget que vous peut ajouter en allant sur les plugins
Facebook . Aussi, j'ai ajout une classe groupe sur
lesmdias div. Je vais vous montrer ce que a fait quand on passe
la CSS.
Maintenant, nous allons le style de tous les lments, voici le CSS.
1 / * Mdias /
2
3 #media {
4
5}
marge : 0 auto ;
6 #video {
7
largeur : 302px ;
flotter : gauche ;
10
11
fond : transparent url (images / vido bg.png) no-repeat ;
12
hauteur : 225px ;
13 }
14 #video h 4 {
15
marge : 0 ;
16 }
17 #video h 4 , #video h 5 {
18
text-align : centre ;
19
couleur : #fff ;
20
text-shadow : 0 1px 0 # 387031 ;;
21 }
22
23 #video .play {
24
flotter : droit ;
25
margin-top : 5px ;
26 }
27
28 #Twitter {
29
largeur : 285px ;
30
hauteur : 180px ;
31
flotter : gauche ;
32
33
fond : transparent url (images / twitter-bg.png) no-repeat ;
34
background-position : en bas ;
35
rembourrage : 0 0 20px 0 ;
36 }
37 #Twitter p {
38
rembourrage : 0 20px ;
39 }
40 #Twitter .time {
41
font-size: 11px;
42
43
couleur : # 999999 ;
44
margin-top : 15px ;
45 }
46
47 au-link { color : # 6767c9 ; text-decoration : aucun ; }
48 au-link: hover { text-decoration : souligner ; }
49
50 #faceb ook {
51 largeur : 285px ;
52 flotter : droit ;
53 }
54
55 / * FIN MEDIA * /
56
57 / * FIX CLEAR * /
58 .group: aprs {
59
contenu : "" ;
60
affichage : table;
61
claire : les deux ;
62 }
63 / * FIN FIX * /
Je style la vido div avec une largeur et une hauteur fixe de 302px
x 225px, il a donn rembourrage, flottait vers la gauche et enfin
ajout une image de fond. Je style h4 et h5 centre et ajout une
ombre porte, pour le bouton de lecture qui a une classe de .play je
flottais vers la droite et a ajout une marge pour le positionner sur la
droite. Pour twitter div je lui ai donn une largeur et une hauteur
fixe de 258px par 180px et a ajout une image de fond positionne
en bas, aussi j'ai donn le .time avec une police plus petite et plus
lgre appelant, aussi pour lelien au- qui a une couleur
bleue. Pour facebook c'est le mme twitter cap et flottait droite.
Le but de la groupe classe est de forcer l'lment auto-clair ses
enfants aka clearfix. Qu'est-ce que cela signifie, c'est le mdia est
l'lment parent qui dtient des lments enfants l'intrieur de
celui-ci qui sont gauche flottant ce sont la vido, twitter et
facebook. L'lment de support ne dtermine pas sa hauteur
lorsque nous appliquons ces clearfix pirater ce sera d'identifier la
identifier automatiquement la hauteur maximale de l'lment enfant.
Etape 8: Travailler sur la section Widget

du widget, lment, voici le code HTML.
1 < div id = "widgets wrap" classe = groupe >
2 < div id = "widget" >
3
4
< div id = "liens" >

< h4 classe = "blancs" > Autres < forts > Liens </ solides >
</ h4 >
<ul>
< li > < un href = "#" > www.example.com </ a > </ li >
< li > < un href = "#" > www.1stwebdesigner.com </ a > </li >
< li > < un href = "#" > www.labzip.com </ a > </ li >
< li > < un href = "#" > www.samplelink.com </ a > </ li>
< li > < un href = "#" >
www.outgoinglink.com </ a > </li >
10
11
12
13
< li > < un href = "#" > www.link.com </ a > </ li >
</ul>
</div>
14
15
16
17
18
19
20
21
<div id="blog">
< h4 classe = "footer-tte blanc" > Dernires nouvelles de la
< forte > Blog </ fort > </ h4 >
<img src="images/blog.png" alt="blog" />
< p class = "title" > n'est pas un problme les gars, mon ePakistan ou lorem cible travers le pays. </ p >
<p class="date">05.30.2012</p>
< p > < un href = "#" classe = "lire la suite" > Lire la suite
</ a > </ p >
</ div > <! - de blog ->
22
23
24
< div id = "location" >

< h4 classe = "footer-tte blanc" > Notre < forte > Localisation
</ fort > </ h4 >
25
< img src = "images / map.png" alt = "map" />
26
< p class = "adresse" > 123 rue inconnue, adresse
27
</ br > 8600 Philippnes </ p >
28
</ div > <! - emplacement de fin ->
29
</ div > <! - widget fin ->
30 </ div > <! -! fin de widgets wrap ->
J'ai ajout une classe groupe de Widget Emballage, vous savez

dj ce que cette classe fait.Ensuite, j'ai cr 3 div liens qui
contient une liste non ordonne, le blog qui contient un en-tte,
image, titre, date et lien En savoir plus. Enfin, l'emplacement qui
contient une image, et l'adresse.
1 / * WIDGET * /
2 # Widget, Emballage {
3
rembourrage : 50px 0 ;
fond : # 333333 url (images / widgets bg.jpg);
5}
6 #widget {
7
largeur : 960px ;
marge : 0 auto ;
9 }
10 h 4 .footer-tte {
11
fond : transparent url (images / footer-header.png) no-repeat ;
12
13
text-indent : 30px ;
14 }
15 #links {
16
largeur : 225px ;
17
flotter : gauche ;
18
19 }
20 #links ul {
21
list-style-image de : url (images / links.png);
22
23 }
24 #links ul li a {
25
couleur : #CCCCCC ;
26
font-size: 13px;
27
28
affichage : bloc ;
29 }
30 #links ul li a: hover {
31
couleur : #fff ;
32 }
33 #blog {
34
35
largeur : 290px ;
36
flotter : gauche ;
37
38 }
39 img #blog {
40
41
top : 50px ;
42
gauche : -18px ;
43 }
44 p.title #blog {
45
couleur : #fff ;
46
47
48 }
49 p.date #blog {
50
51
couleur : #CCCCCC ;
52
53
font-size: 11px;
54
55 }
56
57 a.readmore #blog {
58
59 }
60 #location {
61
62
largeur : 290px ;
63
flotter : droit ;
64 }
65 #location img {
66
67
top : 45px ;
68
gauche : 22px ;
69 }
70 #location p.address {
71
margin-top : 115px ;
72
border-right : 1px solide # 484848 ;
73
padding-right : 20px ;
74
text-align : droit ;
75
couleur : #CCCCCC ;
76 }
77 / * FIN WIDGET * /
Je style de widgets enveloppe div avec un rembourrage de 50px

haut et en bas et ajout un pointill, modle, fond gris. Pour
le widget de div je appled 960px de largeur et la position qu'il
centr. Pour les liens div je lui ai donn une largeur de 225px, flott
gauche et lui donner un 75px de marge de droite, pour
le ul liste. J'ai ajout une image de fond, j'ai aussi appele le unpar
un vol stationnaire gris plus clair et de blanc (je n'ai pas suivi l'effet
de survol dans la conception PSD).
Pour le blogue div je lui ai donn une largeur de 290px, flott
gauche, appliquer une marge de 75px et positionner
relativement. Pour le titre, j'ai ajout un backround, en retrait du
texte, et ajout 58px hauteur de la ligne pour rendre le texte centr
verticalement. Pour le Blog img car nous venons positionns Blog
div rapport, nous pouvons maintenant placer ce absolument pour
positionner l'image mme de la conception psd qui reste 18px. Pour
la .title , .date et.readmore ils ont les mmes marges de
gauche. Pour connatre l'emplacement mme aussi dans le blog o
il est positionn relativement et positionner l'image dans
absolument, et pour l'adresse j'ai ajout marge et rembourrages et
lui donner une bordure de 1px vers la droite.
tape 9: Travailler sur la section client

du client lment, voici le code HTML.
1 <div id="client-wrap" class="group">
<div id="client">
3
4
<ul>
< li > < img src = "images / la client-1.jpg" alt = "" />
</ li >
</ li >
</ li >
</ li >
</ li >
</ul>
10
</ div > <! - client final ->
11 </ div > <! - fin client Emballage ->
En HTML ci-dessus, j'ai ajout un nouveau groupe classe

sur client-wrap div et ajout un lment de liste puces qui
contient une image.
1 / * CLIENT * /
2 # Client-wrap {
3
fond : #fff url (images / client-bg.jpg) repeat-x ;
border-bottom : 1px solide # c8c8c8 ;
6}
7
8 #client {
9
largeur : 960px ;
10
marge : 0 auto ;
11 }
12
13 #client ul li{
14
largeur : 20% ;
15
flotter : gauche ;
16
text-align : centre ;
17 }
18 / * FIN DU CLIENT * /
Dans le CSS ci-dessus Je style du client Emballage div en ajoutant

un peu de gris fond dgrad, les marges suprieure et infrieure
40px et enfin ajout une bordure infrieure grise solide. J'ai plac
centrer le client div et enfin pour les lments de la liste puces qui
contient les images que je flottais il a quitt, puisque nous avons 5
images je divis uniformment en donnant une largeur de 20% de
chaque lment, enfin j'ai appliqu text-align faire la centre des
images.
tape 10: Travailler sur la section Pied de page
Maintenant, nous allons ajouter du contenu l'intrieur du pied de

page lment, voici le code HTML.
1 < footer classe = groupe >
2
< div id = "footer-gauche" >

< p > Droit d'auteur < un href = "#" classe = "vert" >
www.1stwebdesigner.com </ a > </ br >
Conu par < un href = "#" classe = "vert" > Michael Burns </a >
</ p >
</div>
6
7
8
< div id = "footer-right" >

<ul>
< li > < un href = "#" > Accueil </ a > </ li >
< li > < un href = "#" > Services
</ a > </ li >
10
11
< li > < un href = "#" > Qui sommes-nous </ a > </ li >
12
< li > < un href = "#" > Tmoignage </ a > </ li >
13
< li > < un href = "#" > Contactez-nous </ a > </ li >
14
15
</ul>
</div>
16
17
< un href = "# header-wrap" > < img src = "images / backtop.png"alt = "back-haut" classe = "back-haut" /> </ a >
18 </ footer >
En HTML ci-dessus, j'ai ajout un groupe classe au pied de page,

puis cr l'article 2 est le premier pied gauche qui contient le texte
d'auteur, ct pied droit , qui contiennent un des liens de la liste

puces. Enfin, j'ai ajout cliquable vers le haut l'image.
1 / * Cration * /
2 Pied de page {
3
claire : les deux ;
largeur : 960px ;
marge : 0 auto ;
rembourrage : 30px 0 60px 0 ;
8}
9
10 # Footer- gauche {
11
flotter : gauche ;
12
largeur : 50% ;
13 }
14 # Footer- gauche {p
15
font-size: 12px;
16
couleur : # 666666 ;
17 }
18 # Footer- gauche a: hover {
19
couleur : # c8c8c8 ;
20 }
21 # Footer- droit {
22
flotter : droit ;
23
largeur : 50% ;
24 }
25 # Footer- droit ul {
26
flotter : droit ;
27 }
28 # Footer- droit li ul {
29
flotter : gauche ;
30
31 }
32
33 # Footer- droit li ul: last-child {
34
margin-right : 0 ;
35 }
36 # Footer- droit ul li a {
37
couleur : # 666666 ;
38
affichage : bloc ;
39
padding-bottom : 10px ;
40
font-size: 12px;
41 }
42 # Footer- droit ul li a: hover {
43
border-bottom : 2px solide # c8c8c8 ;
44 }
45
46 .back- haut {
47
48
bas : 30px ;
49
droit : 50% ;
50
51 }
52 / * Cration * FIN /
En CSS ci-dessus Je style du pied de page en donnant une largeur

de 960px, centre elle, appliqu un rembourrage de 30px 60px haut
et en bas, enfin je positionn relativement. Pour lepied gauche et le
pied de page droite , je lui ai donn une largeur de 50%, en
flottant gauche et droite. Pour le texte de copyright je l'ai fait
plus petit et chang la couleur pour une plus lgre. Pour les liens
je flottais l' ul vers la droite et flottais li gauche, a donn une
marge de 30px, pour le dernier enfant j'ai enlev la marge, pour les
liens que j'ai style il de mme avec le texte de copyright et ajout
2px frontire lorsque son plan. Enfin, depuis que j'ai positionn le
pied relativement, je peux placer le back-dessus absolument au
centre qui est juste 50%.
Nous avons fini, enfin!
Wew! Cette m'a fallu si longtemps pour crire. Comment tait le

tutoriel? J'espre que vous avez appris quelque chose de ce
tutoriel. Si vous avez des techniques, des commentaires, des
suggestions s'il vous plat partager et dposez-le ci-dessous. Aussi,
pour le prochain tutoriel, je vais vous apprendre faire de cette
disposition sensible. Ouais! Vous avez bien entendu, nous allons lui
permettre de rpondre!
Si vous avez aim ce tutoriel bien vouloir le partager avec vos
amis. Merci! :)

Tutoriel Photoshop Pour Créer Une Interface Web Professionnelle

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Tutoriel Photoshop Pour Créer Une Interface Web Professionnelle

Încărcat de

Drepturi de autor:

Formate disponibile

TUTORIEL PHOTOSHOP

POUR CRER UNE

Dans ce tutoriel Photoshop, nous allons crer une interface web

DFINIR LES PARAMTRES

AJOUTER DES GUIDES POUR

4. Effectuez la mme tape pour le cot droit de votre interface.

8. Double-cliquez sur votre calque de texte pour ouvrir la bote de

9. Dplacez le calque SMASHING une distance de 35px

11. Le logo final devrait ressembler limage ci-dessous.

13. Ajoutez les liens textes de la barre de navigations 12px de

17. Crez un autre rectangle de 960px de largeur et de 360px de

19. Ouvrez une image dans Photoshop et placez-la sur un nouveau

20. partir de la barre de navigation du haut, donnez-lui une

21. Nous allons maintenant crire un titre et une description pour

22. Crez un autre rectangle de 630px de largeur et de 1px de

Arial, couleur: #a4a4a4, grandeur: 12pt et comme antialiasing , loption Sharp.

CRER UNE SECTION

26. lintrieur du groupe de calque quick quote , reproduisez

27. Slectionnez loutil de rectangle coins arrondis (U) et crez

29. crivez par le suite le texte Submit en utilisant la

32. Nous allons maintenant ajouter du contenu cette bote.

Arial, Style: Normal, Grandeur: 12pt, Anti-aliasing: None,

POUR LE LIEN TEXTE:

35. Dupliquez le groupe about et nommez le nouveau groupe

36. Slectionnez les 3 groupes et allez Layer > Distribute >

37. Changez les titres des blocs.

39. Ajouter un texte pour la mention Copyright avec la

40. Crez un nouveau groupe lintrieur du groupe footer et

Si vous avez des opinions, des commentaires ou dautres trucs et

Effet Grunge sur vos images avec photoshop cs4

Effet Grunge sur vos images avec photoshop cs4

Pour commencer importez votre image dans photoshop

Pour commencer dupliquez votre calque Ctrl+J

faite la mme chose pour la couche Vert

changez le mode de fusion de ce dernier en Incrustation

Aujourd'hui va vous montrer comment crer un autre accrocheur mise en page

Avec l'outil Forme personnalise, je vais ajouter quelques flches. Et je vais

Maintenant, je vais crer un bouton, avec l'outil rectangle arrondi.

Pour ce bouton, je vais ajouter les styles de calque suivants.

C'est ainsi que mon bouton va ressembler.

Je mettrai ma couleur de premier plan # 25272a, et je vais crer deux formes

Ceci est mon rsultat

J'ai utilis la police suivante: Myriad Pro (en italique)

Ma dernire tape consiste crer un champ de recherche, o vos clients seront

Voulez tlcharger TOUS Grafpedia Tlchargements y compris cette disposition

12 mai 201018 CommentairesPar Matthew Heidenreich

Je vais vous promenant travers la cration d'une page web

tape 1: Configurez votre toile Photoshop

En utilisant votre outil Pot de peinture (G), remplissez le calque

tape 2: Crer la page web tte forme

tape 3: Ajouter des styles de calque la

tape 4: Crer le nom du site / logo

tape 5: Crer le biseau en haut sur la

Allez-y et changer le mode de la couche la lumire douce de

tape 6: Faire le bouton de la barre de

Utilisez votre outil Rectangle (M) pour faire une slection au

tape 7: Ajouter des styles de calque sur

Dposez style de calque Ombre

Le style de dgrad de la couche de recouvrement

tape 8: Crer l'effet 3D sur le bouton de

tape 9: Donnez le bouton une lueur

Sur un nouveau calque, remplissez la slection de blanc (#ffffff).

nouveau, et appuyez sur votre touche Suppr pour supprimer les

Etape 10: Ajouter l'effet 3D fond sur le