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:

Typo: Arial, couleur: #ffffff, grandeur: 25pt et comme anti-aliasing , loption Sharp.

POUR LA DESCRIPTION:

Typo: Arial, couleur: #a4a4a4, grandeur: 12pt et comme anti-aliasing , loption Sharp.

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:

Police: Trebuchet MS, Style: Normal, Grandeur: 24pt, Anti-aliasing: Sharp

POUR LA DESCRIPTION:

Police: Arial, Style: Normal, Grandeur: 12pt, Anti-aliasing: None, Couleur: #767676

POUR LE LIEN TEXTE:

Police: 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:

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'en-

tte 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 non-

actifs. 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'arrire-

plan 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 en-

tte 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 ci-

dessous.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 ci-

dessous. Double-cliquez sur cette couche et utiliser les paramtres de l'image ci-

dessous 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 ci-

dessous. 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 Voir la dmo

Les ressources de ce tutoriel

PSD Tlcharger

SlidesJS

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 celui-

ci, 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

2

3 < tte >

4

5 < titre > Burnstudio

6 < lien rel = "stylesheet" href = "style.css" >

7

8 < corps >

9 < div id = "header-wrap" >

10 < tte >

11 contenu d'en-tte va ici

12

13

14

15 < div id = "conteneur" >

16

17 contenu des diapositives va ici

18

19

20

21 le contenu du service va ici

22

23

24 < div id = "media" >

25 le contenu des mdias va ici

26

27

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'en-

tte, nous allons marquer les lments HTML qui peuvent tre

trouvs dans cette section.

1 < h1 > < un href = "index.html" titre = "burnstudio" > Burnstudio

2 < div id = "appeler" >

3 < h3 > (012) 345 6789

4 < h4 classe = "vert" > Appelez-nous < forte > maintenant

5

18

19

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 ;

3 font-family : Helvetica , Arial , sans-serif ;

4 font-size: 13px;

5 }

6

7 / * Styles de police * /

8 h 3 {

9 font-size: 24px;


11 couleur : # 333333 ;

12 margin-bottom : 25px ;

13 }

14 h 4 {


16 font-size: 18px;


18 }

19 h 5 {

20 font-size: 14px;


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 font-weight : bold ;

40 }

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 ;

4 padding-top : 40px ;

5 }

6 tte {

7 largeur : 960px ;

8 marge : 0 auto ;

9 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 ;


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 ;


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 / * Safari 5.1+, mobile Safari, Chrome 10 + * /

46 background-image : -webkit-linear-gradient ( top , # 5fae53 , #

3b7c33 );

47 / * Firefox 3.6+ * /

48 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 ;


64 fond : url (images / home.png) no-repeat 50% 50% ;

65 }

66

67 nav ul {li.last


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 line-height : 50px ;

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 ;


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 ;


105 }

106 nav ul li div entre [type = text]: focus {

107 dcrire : aucun ;

108 }

109

110 / * Le style PLACE PORTE * /

111 :: - Webkit-entre-espace rserv {


113 }

114 :-Moz-rserv {


116 }

117

118 nav entre ul li div [type = submit] {

119 fond : url (images / search.png) no-repeat 50% 50% ;

120 frontire : aucun ;


122 margin-left : 15px ;

123 hauteur : 50px ;


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

2

3 (Function () {

4 var = html5elmeents

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.

7 < p > < un href = "#" classe = "lire la suite" > Lire la suite

8

9

10

11




14 < h1 class = "slide-rubrique > Artthatworks 2 dolor sit

amet, consectetur adipiscing elit.

15

< 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



16 < p > < un href = "#" classe = "lire la suite" > Lire la

suite

17

18

19

20




23 < h1 class = "slide-rubrique > Artthatworks 3 dolor sit

amet, consectetur adipiscing elit.

24 < 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



25 < p > < un href = "#" classe = "lire la suite" > Lire la

suite

26

27

28

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 slide-

titre , 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 ;

3 marge : 0 auto ;

4 }

5 / * COULISSES * /

6 #slides {

7 Position : rapport ;


9 }

10 .slides_container {

11 hauteur : 315px ;

12 }

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 ;


22 hauteur : 68px ;

23 couleur : #fff ;

24 font-size: 24px;

25 padding-top : 20px ;

26 padding-left : 80px ;



29 }

30 .slide- droit .info {


32 mar

tutoriel photoshop pour créer une interface web professionnelle

Documents