Vous êtes sur la page 1sur 259

TUTORIEL PHOTOSHOP

POUR CRÉER UNE
INTERFACE WEB
PROFESSIONNELLE

Dans ce tutoriel Photoshop, nous allons créer une interface web
avec un look propre et professionnel. Vous pourrez par la suite
utiliser cette interface tant pour un site personnel qu’un site
corporatif.
À noter que j’ai seulement traduit le tutoriel ce qui explique que toutes
les images sont en anglais. J’ai également présumé que vous utilisiez la
version anglaise de Photoshop. Si vous avez un problème à vous repérer
avec les mots anglais, les images devraient vous aider à vous repérer.
Bon tutoriel !

RÉSULTAT FINAL
Voici le résultat final de l’interface que nous allons créer
aujourd’hui dans ce tutoriel.

PRÉPARER VOTRE
DOCUMENT PHOTOSHOP
1. Pour commencer, créez un nouveau document Photoshop en
utilisant les paramètres affichés dans l’image suivante.

DÉFINIR LES PARAMÈTRES
DE MESURE EN PIXELS
2. Assurez-vous que vos mesures sont affichées en pixels, qui est
l’unité standard pour la conception d’une interface web. Dans la
fenêtre de préférences (Ctrl/Cmd + K), cliquez sur Units &
Rulers et assurez-vous de régler les paramètres d’unités tels
qu’affichés sur l’image suivante.

AJOUTER DES GUIDES POUR
DÉLIMITER LA SECTION DES
CONTENUS
3. À l’aide du panneau d’info (F8) et de l’outil de sélection,
ajoutez un guide à 120px à partir du bout gauche de votre
document comme sur l’image suivante.

4. Effectuez la même étape pour le coté droit de votre interface.
Voici à quoi devrait ressembler votre document.

CRÉER LE LOGO
5. Nous allons maintenant créer le logo du site web. Tout d’abord,
créez un nouveau groupe dans vos calques (layers) que vous
pouvez appeler « logo ».
6. Avec l’outil texte (T), écrivez le nom de votre logo en lettres
majuscules, dans notre cas, nous écrirons « SMASHING »
(Comme vous pouvez le voir, je n’ai pas re-traduit tous les mots du
tutoriels, sinon, les images n’auraient plus « matchées » avec les étapes
du tutoriel).
7. Par la suite, dans votre panneau de caractères (Window ->
Character), utilisez la police Arial en Bold avec une grandeur de 42
pt. Aussi, définissez l’option d’anti-aliasing à Sharp et utilisez la
couleur #101112.

Sélectionnez Gradient Overlay et utilisez les paramètres inscris sur l’image ci-bas. .8. Double-cliquez sur votre calque de texte pour ouvrir la boîte de dialogue.

Changez son texte pour « Dzine« . (Couleur de gauche: #b27625 et couleur de droite: #e5ad27). 10. Le logo final devrait ressembler à l’image ci-dessous. Re-sélectionnez l’outil de texte et ajoutez un texte de description sous le logo avec les paramètres suivants: 11. . sur toute la largeur du document. Dupliquez le calque et déplacez-le vers la droite. Ajoutez un nouveau groupe dans vos calques et appelez-le « navigation« . CRÉER LA BARRE DE NAVIGATION 12. Par la suite. Déplacez le calque « SMASHING » à une distance de 35px à partir du haut et à 0px du coté gauche. Ajoutez un nouveau guide avec la règle du haut et déplacez-le à 150px du haut du document. une ligne horizontale (Raccourcis clavier U) de4px de hauteur avec une couleur #e3ab27.9.7 et 8 en utilisant cependant différentes couleurs pour le dégrader. placez-le en haut du groupe « logo« . Répétez les étapes 6. Dessinez ensuite.

(Couleur de gauche: #e5ad27. Redresser les coins de gauche et de droite du bas de la boîte avec l’outil de conversion des points (Convert Point sur l’image du bas). Sélectionnez l’outil rectangle à coins ronds (U) et dessinez une boîte ayant 72px de largeur par 35px de hauteur. Déplacez ce calque sous les liens textes et nommez-le « hover« . Couleur de droite:#b27625). Changez la couleur du lien « Home » pour du blanc #ffffff. 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.13. . Double-cliquez sur le calque « hover » pour ouvrir sa boîte de styles et ajoutez un dégrader de couleurs (Gradient Overlay).

ajoutez un numéro de téléphone à gauche de l’icône et utilisez la police Arial. Téléchargez cet icône de téléphone et placez-le à coté du guide de droite. en Bold. avec une grandeur de 11pt et la couleur #595959. Sélectionnez l’outil texte. avec une grandeur de 20pt et une couleur de #292929. Ajouter une petite description sous le numéro également en Arial. .CRÉER LA SECTION « APPELEZ-NOUS » 14.

Double-cliquez sur le calque et sélectionnez un Gradient Overlay (Couleur de gauche #2e2226. Créez un nouveau groupe dans vos calques et nommez le « header« . 16. Couleur de droite: #7a7556). .CRÉEZ LA PARTIE « HEADER » DE L’INTERFACE 15. Sélectionnez l’outil de rectangle (U) er créez un rectangle de 1200 px par 440px. Bougez-le à 1px sous la barre de navigation et renommez-le calque « header bg« .

17. . Créez un autre rectangle de 960px de largeur et de 360px de hauteur. Déplacez-le à 40px à partir du haut du calque « header bg » et à 0px du guide de gauche et renommez le « header container« .

Créez un nouveau groupe de calque et appelez le « fp« . .CRÉEZ LA SECTION « PROJET EN VEDETTE » (FEATURED PROJECT) 18. Sélectionnez l’outil rectangle (U) et créez 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« .

À partir de la barre de navigation du haut. Ouvrez une image dans Photoshop et placez-la sur un nouveau calque au dessus de « fp container ». 20.19. Cliquez sur le nouveau calque avec le bouton droit de votre souris et sélectionnez « Create Clipping Mask« . . Changez ensuite sonBlending Mode pour « Luminosity« . donnez-lui une rotation de -4 degrés.

. Créez un rectangle de 630px par 90px avec la couleur #161718. Changez l’opacité du claque à 90% et renommer ce dernier « title bg« . Nous allons maintenant écrire un titre et une description pour l’image du bloc « featured« .21.

Bougez le rectangle sur la bordure du haut du calque « title bg« .22.  Typo: POUR LA DESCRIPTION: . Créez un autre rectangle de 630px de largeur et de 1px de hauteur avec une couleur #9c9c9c et renommer le calque « title horizontal line« . l’option Sharp. 23. grandeur: 25pt et comme « antialiasing« . Ajoutez un titre et une description à l’intérieur du rectangle en utilisant les paramètres suivants: POUR LE TITRE: Arial. couleur: #ffffff.

l’option Sharp. couleur: #a4a4a4.  Typo: .Arial. grandeur: 12pt et comme « antialiasing« .

.

sélectionnez Copy Layer Style) Retournez au calque « qq container » et appliquez le style. sélectionnez « Paste Layer Style« ) 26. À l’intérieur du groupe de calque « quick quote« . 25. Créez un autre groupe dans vos calques à l’intérieur du groupe « header » et nommez-le « quick quote« . Par la suite. (Clique-droit sur le calque. dans le groupe « navigation ». . Créez un rectangle de 300px de largeur et de 340px de hauteur. (Clique-droit sur le calque.CRÉER UNE SECTION « QUICK QUOTE » (CITATION RAPIDE) 24. reproduisez l’interface du bloc comme sur l’image suivante. Déplacez-le à 10px à droite de la section « featured » et appelez-le « qq container« . copiez le style du calque « hover ».

.

Sélectionnez les calques (« submit btn » et « Submit text »).27. Double-cliquez sur le calque et appliquez un « Gradient Overlay ». Utilisez les couleurs mentionnées ci-bas. Sélectionnez l’outil de rectangle à coins arrondis (U) et créez une boîte de 80px de large et de 35px de haut. Choisissez l’outil de la flèche (V) et cliquez sur Align vertical centers et Align horizontal centers dans la barre de navigation du haut. 28. Écrivez par le suite le texte « Submit » en utilisant la typographie Arial. en Bold avec une grandeur de13pt. . Appelez ce calque « submit btn« . 29. 30.

Ensuite.CRÉER LA SECTION « CONTENU PRINCIPAL » 31. créez un rectangle de 300px de large par 175px de haut et nommez-le « c01« . Placez ce même calque à 30px sous le header et à 0px du guide de gauche. Double-cliquez dessus et appliquez ces paramètres: . Créez un nouveau groupe de calque et nommez-le « content« .

.

la description ainsi que pour le lien texte. Premièrement.32. Nous allons maintenant ajouter du contenu à cette boîte. POUR LE TITRE: Trebuchet MS. Ajoutez une petite description ainsi qu’un lien texte sous le titre. Voici les paramètres utilisés pour le titre. Par la suite. Sélectionnez le mot « About » et changez sa couleur pour #b47825. Antialiasing: Sharp  Police: POUR LA DESCRIPTION: . écrivez le texte « About SmashingDzine« . sélectionnez le mot « Smashing » et changez sa couleur pour #2f2f2f. Grandeur: 24pt. Style: Normal.

allez à Layer > New > Group from Layers (Ctrl/Cmd + G) et renommez ce groupe « about« . Nommez ce calque « border« . Maintenez enfoncé la touche Shift de votre clavier pour créer un carré parfait de 88px par 88px. Anti-aliasing: None. cette fois de 82px par 82px et placez-la au centre du calque « border« . Créez une autre boîte. Double-cliquez dessus et utilisez les paramètres suivants:  Police: 34. Anti-aliasing: None. Couleur: #767676  Police: POUR LE LIEN TEXTE: Arial. . Souligné 33. Style: Bold. Appelez ce calque « box » et changez sa couleur pour #d5d5d5. Couleur: #252525. Style: Normal. Sélectionnez l’outil de rectangle (U) avec comme couleur. du blanc. Grandeur: 13pt. Sélectionnez tous les calques du groupe « content« .Arial. Déplacez ce carré à une distance de 10px à gauche du calque (« c01″). Grandeur: 12pt.

Nous avons maintenant 3 groupes (« about« . Dupliquez encore et cette fois. . Déplacez le dernier sur le guide à droite du document.35. renommez le groupe « portfolio« . Dupliquez le groupe « about » et nommez le nouveau groupe « services« . « services et « portfolio« ).

Sélectionnez les 3 groupes et allez à Layer > Distribute > Horizontal Centers pour espacer équitablement les 3 blocs. .36.

.37. Changez les titres des blocs. CRÉER LE « FOOTER » 38. Nommez ce calque « footer bg« . Nous voilà maintenant à la dernière grande étape du tutoriel. Utilisez le même dégradé (Gradient Overlay) que le calque « header bg« . Insérez un rectangle de 1200px par 100px au bas du document. Créez un nouveau groupe dans vos calques et nommez-le « footer« .

Créez un rectangle avec coins ronds de 85px par 35px et nommez son calque « subscribe btn« . 42. Créez un nouveau groupe à l’intérieur du groupe « footer » et nommez-le « subscribe« . Écrivez par la suite le mot « Subscribe » avec la police « Arial » en Bold et une grandeur de 13 pt. 40. une grandeur de 12pt avec le code de couleur #dddddd. . 41.39. Reproduisez l’interface comme sur l’image suivante. Ajouter un texte pour la mention « Copyright » avec la typographie « Arial« .

J’espère que vous avez appris quelques bons trucs pour vos prochains design d’interfaces web ! .RÉSULTAT FINAL Et voilà ! Voici le résultat final de votre interface web.

des commentaires ou d’autres trucs et astuces.Si vous avez des opinions. juillet 18 2009 Effet Sur photo 24 commentaires aucun rétrolien Effet Grunge sur vos images avec photoshop cs4 . n’hésitez pas à les partager à l’aide de la section commentaire dans le bas du tutoriel. TÉLÉCHARGER LE FICHIER SOURCE Effet Grunge sur vos images avec photoshop cs4 samedi.

Pour commencer importez votre image dans photoshop les réglages et les valeurs ne sont pas fixe ça dépend de la quantité de la lumière et de la couleur sans oublier la taille j'ai choisi la photo de cette magnifique volkswagen (Téléchargez 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 > Réglages > Correspondance de la couleur et réglez comme ce si .

Ensuite allez dans Menu > Filtre > Déformation > Correction de l'objectif et réglez comme
ce si

Dans le panneau des calques, cliquez sur l'onglet Couches , puis sur la couleurRouge .

Puis allez à Menu > Images > Réglages > Luminosité / Contraste . Mettez un fort
contraste (+100).

faite la même chose pour la couche Vert
voilà le résultat

Maintenant dupliquez votre calque (Ctrl+J) et allez dans menu > Filtre > Atténuation >
Flou de surface

Ensuite allez dans Menu > Image > Réglages > Désaturer

changez le mode de fusion de ce dernier en Incrustation Et voilà le résultat .

et pour celle du bas. la taille est comme toujours 1000 × 1100 pixels. avec de petites variations. vous avez besoin de faire de petits changements. nous aurons besoin de créer un nouveau document. Pour commencer. Pour le sommet de sa forme je vais utiliser la couleur suivante: # 393e43. je vais utiliser seulement 2-3 couleurs. et je vais créer deux formes. je vais choisir l'instrument de rectangle.COMMENT CRÉER UN MODÈLE D'HÉBERGEMENT WEB affaireschangementd'hébergementmise en pageweb Aujourd'hui va vous montrer comment créer un autre accrocheur mise en page d'accueil. je vais utiliser une autre couleur: # 373a3e . Dans ce tutoriel. et je vais créer ce document avec un fond blanc. et vous pouvez utiliser cette disposition pour toute entreprise Internet que vous avez. bien sûr.

Ensuite. . S'il vous plaît cliquer pour voir l'image en taille réelle. je vais créer un autre formes comme dans l'image ci-dessous.

Comme vous pouvez le voir j'ai des styles de calque appliqués aux couches: .

.

.

je vais ajouter quelques flèches. . Et je vais ajouter le même style de calque comme ci-dessus. je vais créer un bouton. Maintenant. avec l'outil rectangle arrondi.Avec l'outil Forme personnalisée.

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

.

C'est ainsi que mon bouton va ressembler. .

Pour les deux formes que je vais ajouter les styles de calque suivants. s'il vous plaît cliquer sur l'image ci-dessous pour voir la pleine dimension. . et je vais créer deux formes avec l'outil rectangle arrondi.Je mettrai ma couleur de premier plan à # 25272a.

.

.

Si vous avez plus de trois plans que vous pouvez créer d'autres formes.Ceci est mon résultat Au cours de la pleine forme je vais ajouter un autre formes. et je vais utiliser les mêmes styles de calque. . ici je vais créer les plans d'hébergement.

. je vais ajouter un peu de texte.Avec l'outil de type horizontal. je vais ajouter quelques images avec certains serveurs. et dans le même temps. s'il vous plaît cliquer sur l'image ci-dessous pour voir l'image en taille réelle.

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

où vos clients seront en mesure de rechercher des noms de domaine disponibles. . Je vais utiliser le même style de calque j'ai utilisée pour le bouton.Ma dernière étape consiste à créer un champ de recherche.

je vais y ajouter une autre forme (utiliser les mêmes styles de calque comme ci-dessus).Dans le pied de page de la mise en page. J'espère que vous l'aimez. Ceci est mon résultat final. et un peu de texte. .

Concevoir un portefeuille moderne Mise en page Web dans Photoshop .000 articles + vous aurez 12 mois mises à jour gratuites.Voulez télécharger TOUS Grafpedia Téléchargements y compris cette disposition PSD en couches?Inscrivez-vous pour un compte VIP et vous serez en mesure de télécharger 70.

Cette disposition est fortement inspiré par la conception de sites Web de MetaLab .Nous utilisons des outils simples tels que Photoshop styles de calque. .12 mai 201018 CommentairesPar Matthew Heidenreich  Je vais vous promenant à travers la création d'une page web aménagement contemporain qui est parfait pour un site portfolio personnel ou de l'organisme. La palette de couleurs peut facilement être ajustée en fonction de vos goûts. des outils de sélection et outils de forme personnalisée pour créer une conception de sites Web de niveau professionnel. Avant-première Cliquez sur l'image d'aperçu ci-dessous pour voir la mise en page pleine échelle .

Ce sera une bonne taille de travail pour une mise en page web. .Étape 1: Configurez votre toile Photoshop La première chose que nous devons faire est de créer un nouveau document de 1024x900px.

allez dans votre panneau Outils et choisissez votre outil Rectangle arrondi (U). Réglez 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 tête / tête de mât pour la mise en page. remplissez le calque Arrière-plan blanc par défaut avec une couleur bleu foncé (# 0b2533).En utilisant votre outil Pot de peinture (G). Centrer horizontalement à l'aide de l'outil Déplacement (V). Étape 2: Créer la page web tête forme Maintenant. .

puis choisissez Options de fusion dans le menu pour ouvrir les styles de calque fenêtre de dialogue. nous voulons ajouter quelques styles de calque pour le rectangle arrondi nous avons fait. Ajouter un style de calque Gradient Overlay pour donner à notre tête sa couleur métallique orange. . Cliquez-droit sur votre couche de rectangle arrondi dans le panneau Calques.Étape 3: Ajouter des styles de calque à la couche en-tête de forme Maintenant.

.Étape 4: Créer le nom du site / logo En utilisant une police simple. sortir l'outil Texte horizontal (T) et posez votre logo sur le côté gauche de notre tête. (j'ai utilisé Fruitger pour le logo et Myriad Pro pour le slogan). Assurez-vous que votre nom de site et le slogan sont sur des couches de texte séparés de sorte que vous pouvez les déplacer indépendamment les uns des autres.

déplacez votre sélection 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 Déplacement (V). Alors qu'il était encore sélectionné. puis abaissez l'opacité à 65%. puis allez dans Edition> Effacer.Étape 5: Créer le biseau en haut sur la tête Ctrl / Cmd + clic sur votre couche de rectangle arrondi pour faire un rectangle de sélection autour de lui automatiquement. Remplissez votre sélection avec du blanc (#ffffff) sur un nouveau calque. Allez-y et changer le mode de la couche à la lumière douce de mélange. .

É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 côté supérieur droit de l'en-tête.

Utilisez votre outil Rectangle (M) pour faire une sélection 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
portée et un style de calque Gradient Overlay.

Déposez style de calque Ombre

Le style de dégradé de la couche de recouvrement

Étape 8: Créer l'effet 3D sur le bouton de
la barre de menu de navigation
En utilisant votre outil Lasso polygonal (L), faire une sélection
triangulaire sur le côté gauche de la touche pour donner
l'impression qu'il est suspendu sur la tête.
Remplissez la sélection avec une couleur bleu-gris (# 657681).

Étape 9: Donnez le bouton une lueur
radiale
Utilisez votre outil Rectangle de sélection elliptique avec Plume à
environ 15px de faire une sélection dans le centre du bouton.

Sur un nouveau calque, remplissez la sélection de blanc (#ffffff).
Changer le mode de fusion de la couche de Lumière douce et
réduire 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 sélectionner.
Ensuite, inverser la sélection en allant à Sélection> Intervertir (Maj +
Ctrl / Cmd + I).Choisissez votre radiale couche luminescente de

Ajouter du texte (comme "Home") en utilisant l'outil Texte horizontal (T) à votre bouton. remplissez la sélection de blanc (#ffffff). En utilisant votre outil Rectangle (M). faire une sélection qui exclut environ 5px-6px d'une partie de la touche inférieure. nous devons Ctrl / Cmd + clic de la couche de forme de notre bouton faire une sélection autour d'elle. sur un nouveau calque (en dessous de la couche luminescente radiale. mais au-dessus de la couche de forme du bouton). Etape 10: Ajouter l'effet 3D fond sur le bouton Encore une fois. Choisissez Edition> Effacer pour supprimer la partie supérieure du rectangle blanc. . et appuyez sur votre touche Suppr pour supprimer les zones à l'extérieur de la touche. Allez-y et changer le mode de fusion du calque de superposition. Puis.nouveau. puis baisser l'opacité à environ 44%.

En utilisant votre outil Rectangle (M).Étape 11: Assurez-boutons du menu de navigation plus Répétez le processus pour créer plusieurs éléments de liaison pour la barre de navigation principale. faire une sélection qui s'étend sur la largeur de votre tête et autour 460PX en hauteur. Etape 12: Création de la zone de contenu de fond Allons de l'avant et de faire le fond de notre zone de contenu. . Remplissez votre zone sélectionnée avec une couleur de lumière bleu-gris (# b7c3c1). J'ai créé trois autres boutons de la barre de menu de navigation.

Donnons la zone de contenu de fond un Gradient Overlay. .

Nous devons ajouter un peu de brillance sur le fond de notre gradient d'orange. Sur un nouveau calque. Faites une sélection 1px 1px haut à partir du bas de la zone d'entête orange. remplissez la sélection de blanc (#ffffff). Changer le mode de fusion du calque sur Lumière tamisée. C'est une petite chose. . mais les détails comptent.Étape 13: Créer un encart horizontal 1px sur l'en-tête Passons revenir un peu à la tête. et ce que vous allez vous retrouver avec un bel effet 1px médaillon.

Remplissez la sélection avec n'importe quelle couleur (nous allons utiliser les styles de calque pour la colorer en plus tard. il devrait être d'environ 180px-200px de largeur. de sorte que la couleur que vous choisissez n'a pas d'importance à ce point). Faites une sélection avec votre outil Rectangle (M) sur le côté gauche de la zone de contenu. .Étape 14: Créer la barre latérale sur la gauche Passons à notre barre latérale.

nous donnons la barre latérale une ombre interne et une superposition des couleurs.Ensuite. Style de calque Ombre interne .

Style de calque Incrustation couleur .

remplir avec la couleur grise (# 4a5452). Faites une sélection pour le diviseur vertical 1px qui s'étend de haut en bas. sur un nouveau calque.Étape 15: Faire un diviseur vertical sur la droite Nous voulons créer une division verticale 1px entre notre barre latérale et la zone de contenu principal. et. .

Puis baisser l'opacité de votre couche de séparation à environ 37%. Etape 16: Ajouter un titre de menu de barre latérale Utilisation de votre outil de type horizontal (T) et avec votre couleur de premier plan mis avec une couleur bleu foncé (# 1e2e36). . J'ai utilisé le texte "Parcourir par catégorie". ajouter un titre au sommet de notre barre latérale. Disons le style de la couche en-tête de texte avec un style de calque Ombre portée qui lui donnera que populaire effet de texte encadré / typographie .

Cela servira de toile de fond pour votre lien de catégorie active.Étape 17: Faire l'encadré actif menu fond Faites une sélection avec votre outil Rectangle de sélection (M) juste en dessous de la "Recherche par catégorie" rubrique et remplissez le de noir (# 000000). . En utilisant votre outil Lasso polygonal (L). faire une sélection de telle sorte que le côté droit de la catégorie fond actif sera la forme d'une flèche pointant vers la droite.

. Pour la couleur de la catégorie fond actif. choisissez Edition> Effacer ou appuyez sur la touche Supprimer pour supprimer la zone non désirées.Avec votre sélection effectuée. nous allons utiliser un style de couleur bleue couche Gradient Overlay.

. choisissez Edition> Effacer. il suffit d'appuyer sur Maj + Ctrl / Cmd + D pour sélectionner à nouveau). Ensuite. spécifiez 1px.Etape 18: Donner le fond de l'élément de menu à la frontière 1px Ctrl / Cmd + cliquez sur votre calque pour le sélectionner. Aller à Sélection> Modifier> Contrat et. dans le contrat par option. puis remplissez la sélection de blanc (#ffffff) sur son propre calque. Cela devrait donner à notre actif lien de catégorie fond un 1px bordure blanche autour de lui. Vous n'avez pas encore désélectionner (et si vous l'avez fait.

et de donner ensuite la frontière 1px un style bleu au blanc couche Gradient Overlay.Baisser l'opacité du calque à 40%. .

Baisser l'opacité du nouveau calque à 15%. .Utilisez votre outil Rectangle (M) de mettre une sélection de ligne de 1px en bas de votre menu actif fond et remplissez le de noir (# 000000) sur un nouveau calque.

sur un nouveau calque.Étape 19: Concevoir le fond pour la catégorie des liens non actifs Nous voulons ensuite montrer comment nos catégories non-actifs apparaîtront. . Pour la couleur de l'arrière-plan de la catégorie des liens non-actifs. puis.Utilisez le outil Rectangle (M) pour placer une sélection ci-dessous notre catégorie active fond. nous allons utiliser un style de calque Gradient Overlay. remplissez-le avec une couleur gris très foncé (# de 1f2324).

.

Etape 11: Créer séparateurs horizontaux entre des liens de catégorie En utilisant votre outil Rectangle (M). Sur un nouveau calque. faire une sélection de 1px haute qui agira comme séparateurs horizontaux entre les liens de catégorie. remplissez la sélection de blanc (#ffffff) et également réduire l'opacité du calque à environ 19%. .

En utilisant votre outil Rectangle . Etape 13: Ajouter une ombre sur le coin supérieur droit de la zone de contenu Faisons la zone de contenu un peu plus intéressant en ajoutant une ombre en haut à droite de celui-ci.Etape 12: Ajouter la catégorie des noms et des icônes Tout ce qui reste à la barre latérale est d'ajouter des icônes et du texte. Je vous laisse trouver votre propre icône de favori met à utiliser (ou ne pas utiliser les icônes du tout). La police que j'ai utilisé était Helvetica gras. au format 11 points. Voilà pour notre catégorie de la barre latérale des liens. Il suffit d'utiliser l'outil Texte horizontal (t) avec le jeu de couleurs à blanc (#ffffff) pour votre texte.

aller de l'avant et de réduire l'opacité de ce calque à environ 5%. . utilisez votre outil Rectangle de sélection elliptique pour couper la partie gauche de votre zone rectangulaire noire (appuyez simplement sur la touche Suppr lorsque vous êtes satisfait de votre sélection elliptique). juste en dessous de l'en-tête orange.(M) mettre une sélection rectangulaire en haut à droite et remplissez le de noir (# 000000) sur un nouveau calque. puis baissez l'opacité de votre calque à 12%. Remplissez la sélection avec du noir (# 000000). Ensuite. faire une sélection en haut de la zone de contenu. En utilisant votre outil Rectangle (M) de nouveau. Aussi.

Étape 14: Faire la section contenu en vedette Avec votre outil Rectangle (M) mettre une sélection vers la partie supérieure de la zone de contenu. Pour styliser notre section de la zone de contenu présenté. qui peut être utilisé pour promouvoir votre projet présenté. nous allons ajouter une ombre portée et un style de calque Gradient Overlay. Déposez style de calque Ombre . Remplir le contenu sélection de la section de la zone sélectionnée avec le noir (# 000000) sur un nouveau calque. Cette zone contiendra notre image de zone sélectionnée. en laissant une certaine marge sur tous les côtés.

Le style de dégradé de la couche de recouvrement .

Etape 15: Ajouter une image du projet
présenté et remplir contenu
Je suis allé de l'avant et ajouté un peu de remplissage pour une
image de projet sélectionnée 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
générateur pour obtenir un contenu de texte combinée avec l'outil
Texte horizontal (T).

Etape 16: Faire le bar "détail"
Nous voulons maintenant faire un bar "détail", qui est un élément de
l'interface utilisateur qui fonctionne comme un système de
navigation pour nos images de projets présentés, en laissant vos
utilisateurs de faire défiler votre travail, et de fournir un peu
d'information pour vos clients potentiels.
Utilisez votre Rectangle de sélection pour effectuer une sélection
rectangulaire court et large en dessous de la teneur en charge,
nous avons placé à l'étape précédente.Remplissez ce sera noir (#
000000).

Style de la barre "détail" en ajoutant un dégradé de couleurs en
utilisant les styles de calque fenêtre de dialogue.

Ensuite, utilisez votre outil Rectangle (M) pour ajouter une bordure
haute 1px sur le dessus de votre barre. Assurez-vous que la
sélection est 1px par le haut de la barre.
Sur un nouveau calque, remplissez la frontière 1px blanc (#ffffff) et
réduire l'opacité du nouveau calque à environ 53%, ainsi que de
définir le mode de fusion Lumière tamisée.

Cela servira de l'indication de qui présentait projet l'utilisateur est actuellement en.Etape 17: Concevoir les cercles de progression sur la barre "détail" Utilisez votre outil Rectangle de sélection elliptique tout en maintenant la touche Maj enfoncée pour faire un cercle vers le côté gauche de la barre. Ajouter une incrustation en dégradé pour le style du cercle. Remplissez-le de blanc (#ffffff). .

.

Créez un autre cercle qui est la même taille que le premier cercle (ou dupliquer le premier cercle et il suffit de changer les styles de calque à celles mentionnées ci-dessous).Nous devons ensuite faire des cercles pour les articles nonactifs. Ensuite. utilisez une ombre interne et un Gradient Overlay pour donner l'élément non-actif cercle de couleur. Style de calque Ombre interne .

Le style de dégradé de la couche de recouvrement .

.

dupliquez le cercle que vous venez en revanche de nombreux cercles d'articles non-actifs que vous souhaitez. Également ajouter du texte et des icônes à notre bar "détail". .Ensuite.

Ensuite. . puis le remplir avec une couleur bleu-gris (# 8fa09d).assurez-vous que cette couche est dans toutes vos autres calques sauf le calque Arrière-plan. Utilisez votre outil Rectangle arrondi (U) pour créer un rectangle en bas de votre mise en page avec l'option Rayon fixé à 10px .Etape 18: Création de la partie inférieure de notre zone de contenu Ajouter la partie inférieure de la zone de contenu à l'aide 1px lignes horizontales comme nous l'avons fait dans les étapes précédentes avec l'outil Rectangle. utilisez votre outil Rectangle (M) à faire une sélection autour de la zone du bas. Étape 19: Faire le pied de page La dernière étape consiste à créer votre pied de page.

.Donner à la zone de pied de page un style de calque Gradient Overlay.

juste la sélection) en hausse d'environ 6px.Suivant Ctrl / Cmd + cliquez sur votre calque de forme de rectangle arrondi nouvellement créé dans le panneau Calques pour le sélectionner. Maintenant. Sur un nouveau calque. . pousser la sélection (pas la couche. remplissez votre sélection avec du noir (# 000000).

Baisser l'opacité de la couche d'environ 5%. Après la création de la sélection. Déposez style de calque Ombre . juste aller dans Edition> Effacer pour supprimer la zone en son sein. La dernière 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. Encore une fois. et une ombre portée et Gradient Overlay options sur mon calque de texte. Nous voulons ensuite utiliser notre outil Rectangle de sélection elliptique (M) de faire un droit de sélection vers le milieu pour donner le pied de sa surface d'aspect métallique.Choisissez Edition> Effacer et puis baisser l'opacité de ce calque à environ 19%. nous voulons Ctrl / Cmd + clic la couche de bas de page de fond pour le sélectionner et remplir la zone sélectionnée avec le noir (# 000000) sur un nouveau calque.

Le style de dégradé de la couche de recouvrement .

.

comment créer une mise en page Web d'aspect moderne qui serait parfait pour un portfolio personnel ou de l'organisme. et avec beaucoup de captures d'écran. étape par étape.Résumé Tutorial Ce tutoriel vous a montré. . outils de forme. et les styles de calque pour créer cette belle mise en page. Nous avons utilisé des outils de Photoshop de base tels que les outils de renom de sélection. La maquette PSD peut être converti en une mise en page HTML / CSS pleinement fonctionnel ou même porté à une plate-forme / publication de CMS comme Drupal ou WordPress.

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. Nous allons utiliser différentes techniques de Photoshop. nous avons inclus un HTML / CSS / JavaScript kit graphique travail que vous pouvez .Créer un Web Design propre et chic dans Photoshop 11 mars 201062 CommentairesPar Matthew Heidenreich  Dans ce tutoriel conception web. En prime. vous apprendrez comment créer une mise en page Web élégant et professionnel qui peut être utilisé comme un site portfolio web.

. gratuitement! Avant-première Cliquez sur l'image ci-dessous pour voir la conception de sites Web maquette à l'échelle réelle .télécharger et utiliser de quelque façon que vous le souhaitez.

Ressources  Vector Social Media Icons par IconDock  Grungy Beige Naturel Photoshop par Webtreats  Brosses floraux par Vassili Orlov  Mono Icônes par Jason Cho Étape 1: Mettre en place le document Photoshop La première chose que nous devons faire est de créer un nouveau document Photoshop pour travailler avec. créer un nouveau document avec les dimensions de 1020x1180px .Démo de travail Cliquez sur l'image ci-dessous pour voir la démonstration de travail (que vous pouvez télécharger au bas de ce tutoriel). Pour cette conception mise en page Web. .

Étape 2: la barre de navigation fond
Nous voulons commencer à l'en-tête et ensuite travailler notre
chemin à notre pied.En utilisant votre outil Rectangle (M), créer un
rectangle de sélection 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: Esthétiques la barre de
navigation fond
Répliquer la couche barre de navigation de fond que vous venez de
créer 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'arrière-plan peut être carrelé pour
une utilisation ultérieure.

Ensuite, changer le mode de fusion de ce calque sur Recouvrement
et baisser l'opacité à environ 23% .

Étape 4: Créer logo / nom du site
Pour notre logo, j'ai utilisé la police Géorgie réglé 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'icône du logo / nom du site, j'ai utilisé

le boxupload32icône de la libre Mono icônes 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 démarquer un peu plus, faire un
rectangle arrondi derrière elle. En utilisant votre outil Rectangle
arrondi (U) à partir du panneau Outils avec l'option set Rayon
de 5px et votre plan défini à # 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 paramètres de l'ombre:

paramètres de l'AVC:

Etape 6: Ajouter le fond de la zone
sélectionnée
Sur la partie supérieure de notre mise en page Web, il y aura une
zone sélectionnée qui a un diaporama d'image de sorte que les
utilisateurs peuvent naviguer et voir à travers vos œuvres
présentées. Cette zone abritera aussi une petite description sur
votre site. Pour démarrer les choses, nous voulons utiliser notre
outil Rectangle (M) pour faire un rectangle qui représente l'arrière-

plan de cette zone sélectionnée. sur le fond de la zone sélectionnée. Cmd / Ctrl + clic sur la vignette du calque d'arrière-plan sélectionnée dans le panneau Calques pour faire une sélection automatique. le remplir avec la couleur: # D3CAB8 . puis cliquez sur le masque Ajouter couche bouton au bas de l'écran pour masquer tout mais la zone sélectionnée. Étape 7: Masquez les parties non désirées de la texture de fond Vous allez finir par avoir beaucoup de texture que nous ne voulons pas être montrant. Puis modifier l'opacité de votre texture couche à environ 35% de laisser la couche ci-dessous montrent à travers. si nous voulons masquer ce que nous n'avons pas besoin. Ensuite. . téléchargez et ouvrez le modèle sale Beige Naturel Photoshop (ou un motif de votre choix) dans Photoshop. Faites glisser la texture sur votre toile principale. Pour ce faire. Choisissez votre couche de texture à partir de votre panneau Calques.

. j'ai utilisé le blanc comme couleur ( #FFFFFF ). Assurez-vous de mettre le texte d'en-tête et le corps du texte sur leurs propres couches distinctes. et pour le corps du texte. une couleur gris clair ( # 2A2A2A ). ajouter du texte dans cette zone sélectionnée en utilisant Helvetica ou Arial .Utilisation de l'outil Texte horizontal (T). Pour notre rubrique texte.

Baissez ombre: Gradient paramètres de recouvrement: . ce qui produit un effet de type insert. lui donner une ombre portée et un dégradé de couleurs.Pour pimenter le texte du titre.

.

. utiliser le outil Rectangle arrondi (U) de nouveau avec un rayon de 5px .Étape 8: Créer le "A propos" bouton arrondi de coin Pour le "A propos" bouton d'interface. Vous pouvez trouver l'icône de flèche j'ai utilisé (il est appelé circleright32 ) en Mono icônes . Le texte sur le dessus de votre bouton peut utiliser la couleur de # 404040 . Redimensionner l'icône pour s'adapter sur le bouton que vous avez créé en utilisant la commande gratuit (Cmd / Ctrl + T) Transform.

ajouter une lueur externe et un dégradé de couleurs pour rendre la forme plus intéressante. Paramètres Lueur externe: Gradient paramètres de recouvrement: .Sur cette couche de forme de rectangle arrondi.

.

téléchargez et installez le Floral Brosses Pack brosse (énumérés dans la section Ressources ci-dessus).Étape 9: Ajouter un élément de design de florish La dernière étape de ce côté-ci de notre région sélectionnée est l'ajout d'un florish. Tout d'abord. un élément de design subtil qui améliore l'élégant et chic look-and-feel de notre conception de sites Web. Réglez votre couleur de premier plan à # 343434 avant d'appliquer votre pinceau. .

. Utilisez votre outil Rectangle arrondi (U) avec un plan mis à blanc ( # FFFFFF ) et un rayon de 5px pour générer une forme de rectangle arrondi sur le côté droit de la mise en page Web. Etape 10: Création de la zone de diaporama Laissez-nous travailler sur notre zone de contenu de diaporama. et appliquez votre coup de pinceau en un seul clic. trouver une pointe de pinceau floral que vous aimez dans le pack de brosse.Choisissez l'outil Pinceau (B). nous avons installé. changer le mode de fusion de la couche de Hard Light. Ensuite.

Modifier le remplissage sur cette couche à 15% de laisser une partie de la trame de fond montrent à travers. . puis ajouter une ombre portée sur la forme.

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

Après l'avoir sélectionné. créez un nouveau calque et remplissez votre sélection avec du noir ( # 000000 ). Créer un cadre de sélection autour de l'image par Cmd / Ctrl + clic sur la vignette d'aperçu de sa couche dans le panneau Calques. Ensuite. ajouter un peu de texte pour décrire l'image en utilisant l'outil Texte horizontal (T). Pour finir le tout. . Baisser l'opacité de ce calque à environ 75% de laisser votre image couche spectacle à travers. utilisez votre outil Rectangle (M) pour sélectionner la partie supérieure de votre rectangle noir arrondi nouvellement créé et supprimez-le.Etape 12: Ajouter une description de l'image étant représentée Ajoutons une description de l'image est actuellement affiché dans la zone de diaporama.

une séparation horizontale grise en bas de celui-ci. Nous voulons suivre la même méthode que les étapes 2 et 3 pour la création de cette division. la seule chose qui change est l'ajout d'une ombre interne en elle. .Etape 13: Ajouter un diviseur en bas de la zone sélectionnée La dernière étape de notre région sélectionnée est à ajouter.

Voici notre région sélectionnée dûment rempli: Il est temps de passer à notre zone de contenu principal. bien. afin de créer un rectangle de sélection avec l'outil Rectangle . Étape 14: Ajoutez de la couleur à l'arrièreplan de la zone de contenu principal Tout comme vous l'aurez deviné. Nous ne voulons pas être ennuyeux et laisser le fond blanc. notre zone de contenu abritera les trois colonnes affichées dans l'aperçu de notre conception de sites Web.

Notre zone de contenu va être assez simple. le remplir avec une couleur blanc cassé ( # FBF5EA ). mais simple. Étape 15: Ajoutez des titres de colonnes Pour nos têtes de colonne.(M) qui s'étend sur toute la largeur de la toile. J'ai utilisé la police Géorgie et une couleur gris foncé ( # 323232 ) pour le texte d'en-tête de colonne. Nous allons commencer par le côté gauche côté où nous allons placer la liste des services. va un long chemin si c'est fait correctement. choisissez des représentations symboliques de la teneur que la colonne aura des icônes monochromes et les positionner à gauche. .

Ensuite. Créer un chemin comme indiqué ci-dessous. Ensuite. trouver une belle pointe de pinceau avec l'option Diamètre de Master à 3 pixels . en ajoutant un style de calque incrustation en dégradé. Pour ce faire. nous voulons donner un peu d'un gradient à notre ligne sinueuse. Appliquer une course à la voie d'abord à fixer votre couleur de premier plan à la même couleur que le texte ( # 323232 ). Sur un nouveau calque. allez dans votre panneau Tracés (Fenêtre> Chemins) et cliquez sur le chemin de la course avec une brosse bouton au bas du panneau. Ensuite. . ajoutez une bordure inférieure ci-dessous les titres des colonnes à l'aide de l'outil Plume (P).

.

Baisser l'opacité de ce à environ 24% . . et ensuite un clin d'il 4 ou 5 pixels en dessous de la ligne d'origine.Dupliquer votre couche lignes courbes (Ctrl / Cmd + J).

je voulais changer la couleur. Pour le corps du texte. alors j'ai fait un gris de couleur unie ( # 484848 ) rectangle de présenter mon état stationnaire proposée de ces boutons dans la conception de sites Web maquette arrondi. utiliser une teinte lisible de gris (comme # 2A2A2A ). . Utilisez la même procédure à l'étape 8 pour faire les "Lire la suite" boutons de l'interface. Cependant. Notre couleur du texte d'en-tête est fixé à gris foncé ( # 323232 ). pour la rangée du milieu.Etape 16: Ajouter du contenu à la colonne de gauche Tout ce qui reste de la colonne de gauche est d'ajouter son contenu.

Créer la même position que nous avons fait pour la colonne de gauche.Etape 17: Ajouter du contenu à la colonne du milieu Avec la colonne de gauche complet. mais changer jusqu'à l'icône avec celui que vous trouvez approprié. . il est logique de se déplacer vers le centre.

faire un petit arrondi boîte de contenu de coin et disposer du texte et la description.En utilisant votre outil Rectangle arrondi (U) avec un rayon de 3 pixels et une couleur de premier plan blanc ( # FFFFFF ). Paramètres Lueur externe: . appliquez une lueur externe et une couche style de trait à votre boîte de contenu de coin arrondi. Ensuite.

paramètres de l'AVC: .

. ajouter une image en fonction de votre description.Pour finaliser la boîte de contexte de coin arrondi.

Nous voulons créer la même position pour les deux autres. en utilisant une icône différente qui est symbolique du contenu de cette colonne. .Etape 18: Ajouter du contenu à la colonne de droite La colonne de droite est très similaire à la façon dont la colonnes de gauche et de centre sont disposés.

Pour les liens non-actifs. vieux blanc ( # FFFFFF ). j'ai utilisé plaine. Pour nos liens actifs. Dans cette boîte de coin arrondi. appliquer le même processus que dans l'étape 2 pour créer le bruit. j'ai créé un fond en utilisant l'outil Rectangle arrondi (U) avec un 3px rayon et la même couleur gris foncé comme nos liens non actifs ( # 353535 ) pour le faire ressortir. Utilisez votre outil Rectangle arrondi (U) avec un rayon de 3 pixels pour créer la boîte. Derrière notre lien actif. j'ai utilisé une couleur de police gris foncé ( # 353535 ). nous devons créer notre widget Newsletter. . fond gris de sorte que nous pouvons réutiliser l'élément de conception dans la barre de navigation dans notre mise en page Web. Étape 19: Concevoir le widget à la newsletter Ensuite.

encore une fois. . C'est pour notre zone de contenu principal! Il est temps de passer à la dernière partie de notre mise en page Web: le pied de page. 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. La police de la rubrique est Géorgie italique . J'ai placé un style de calque Incrustation couleur en utilisant une couleur beige ( # de F7E5C4 ) sur l'icône pour faire fondre dans un peu mieux sur le plan de la couleur de notre mise en page Web. de Mono icônes .Tout ce que vous devez faire maintenant est d'ajouter du contenu à votre widget Newsletter. et l'icône est. utiliser une couleur de remplissage de blanc (# FFFFFF ). Ensuite.

Maintenant. . de sorte qu'il peut accueillir plus de contenu. En utilisant votre outil Rectangle (M). changez le mode de la couche de votre rectangle de lumière douce de mélange et baisser l'opacité à 63% pour laisser le fond du pied montrer à travers.Répétez ce processus pour autant de liens que vous avez besoin. bien que. Ensuite. Etape 21: Ajouter le contenu du pied de page Ensuite. placez un texte de couleur blanche ( # FFFFFF ) dans la boîte de votre lien.Etape 20: Ajout de l'arrière-plan du pied de page Le pied de page va être fait exactement comme l'arrière-plan entête de navigation de l'étape 2 et l'étape 3 Vous voulez faire un peu plus grand que la navigation. ajouter des liens vers notre pied. de créer un rectangle et le remplir avec une couleur gris foncé ( # 323232 ).

s'il vous plaît n'hésitez pas à demander dans les commentaires. Si vous avez des questions. puis ajouter le logo et le copyright texte sur le côté droit de notre bas de page.La dernière chose que nous devons faire est d'ajouter nos icônes de médias sociaux au-dessus du menu de navigation de notre bas de page. C'est tout! Conclusion J'espère que vous avez trouvé ce tutoriel utile et facile à suivre. . montrer votre travail dans le groupe de conception Instruire Flickr . Les icônes de médias sociaux utilisés proviennent des vectorielle Social Media Icons . Si ce tutoriel vous inspire.

COMMENT CRÉER UN MODÈLE BLEU WEB PROPRE EN UTILISANT PHOTOSHOP blogbleupropremise en page .

définir la largeur de 1200px et la hauteur de 1160px. Pour masquer rapidement de spectacle les guides. Allez dans Image> Taille de la zone.psd" (vous trouverez ce fichier dans les modèles> dossier Photoshop). nous allons augmenter la taille de notre document. . ETAPE 1 Tout d'abord. je vais vous montrer comment créer une mise en page web bleu propre dans Photoshop. Utilisez le pot de peinture (G) pour remplir le fond avec la couleur # 38434b. Nous allons utiliser le système de grille de 960 . Ensuite. Cacher le groupe «24 Col Grille" et activez les guides (Affichage> Afficher> Guides). utilisez le raccourci Ctrl / Cmd +. Téléchargez. décompressez l'archive et ouvrez le fichier "960_grid_24_col 2. .Dans ce tutoriel. Faites un clic droit sur le calque Arrière-plan et sélectionnez Convertir en objet dynamique. allez dans Filtre> Bruit> Ajout de bruit et d'utiliser les paramètres de l'image ci-dessous. Nommez ce calque "bg".

. Jetez un oeil à l'image ci-dessous pour placer votre texte dans la bonne position. Double-cliquez sur cette couche pour ouvrir la fenêtre Style de calque et utiliser les paramètres de l'image ci-dessous.ETAPE 2 Sélectionnez l'outil Texte (T) et d'écrire le nom de votre mise en page dans le coin supérieur gauche de votre document en utilisant la couleur # 93aaba.

.

. Double-cliquez sur cette couche pour ouvrir la fenêtre Style de calque et utiliser les paramètres de l'image cidessous. sélectionnez l'outil Texte (T) et ajouter du texte dans votre barre de recherche en utilisant la couleur # 526572. Ensuite.ETAPE 3 Créer un nouveau groupe et nommez-le "bar de la recherche". Sélectionnez l'outil Rectangle arrondi (U). définir le rayon de 8px et créer un rectangle arrondi sur le côté droit de votre mise en page en utilisant la couleur # cdd7de. Jetez un oeil à l'image ci-dessous pour référence.Nommez ce calque "barre de recherche".

.

définir le rayon de 8px et créer un rectangle arrondi blanc comme celui que vous voyez dans l'image cidessous. Double-cliquez sur cette couche et utiliser les paramètres de l'image cidessous pour Ombre.ETAPE 4 Sélectionnez l'outil Rectangle arrondi (U). .

.

. faites un clic droit sur cette couche et sélectionnez Créer un masque d'écrêtage.Nommez ce calque "barre de navigation". Double-cliquez sur cette couche et utiliser les paramètres de l'image ci-dessous pour Gradient Overlay. Ensuite.ETAPE 5 Utilisez l'outil Rectangle (U) pour créer un rectangle avec le 50px de hauteur et la couleur # 7493a8 en haut du rectangle arrondi blanc.

.

ETAPE 6 Sélectionnez l'outil Rectangle (U) et de créer un rectangle blanc sous la barre de navigation. Nommez ce calque "gradient" et réglez son opacité à 10%. . Laisser une distance de 1px entre la barre de navigation et de ce rectangle. Ajouter un Gradient Overlay à cette couche en utilisant les paramètres de l'image ci-dessous.

.

régler le poids de 1px et créer une ligne en bas de la barre de navigation en utilisant la couleur # 506b7f. Appuyez sur Ctrl / Cmd + J pour dupliquer cette couche.ETAPE 7 Sélectionnez l'outil Ligne (U). Nommez ce calque «ligne sombre 1px". Changez la couleur de cette ligne # 789ebb et nommez le calque "de la ligne de lumière 1px". Sélectionnez l'outil Déplacement (V) et appuyez sur la flèche vers le haut une fois pour déplacer un pixel vers le haut. .

Sélectionnez 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 paramètres de l'image ci-dessous.ETAPE 8 Créer un nouveau groupe et nommez-le "navbar". .

.

j'ai utilisé la couleur # 50728d. ETAPE 10 . Jetez un oeil à l'image ci-dessous pour référence. Puis ajouter quelques images et du texte à l'intérieur du rectangle arrondi blanc. Pour le texte. J'ai utilisé des images de paquets de vecteur de Grafpedia.ETAPE 9 Créer un nouveau groupe et nommez-le "sélectionnée".

sélectionnez l'outil Ellipse (U) et de créer un cercle blanc sur le côté droit de votre région en vedette. Ensuite.Créer un nouveau groupe et nommez-le "flèche droite". . Ensuite. sélectionnez l'outil Forme personnalisée. et de créer deux flèches avec la couleur # 38434b l'intérieur du cercle blanc.

.

Déplacez ce groupe dans le côté gauche de la zone sélectionnée et nommez-le "flèche 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 sélectionnée. Puis allez dans Edition> Transformation> Symétrie axe horizontal.ETAPE 11 Faites un clic droit sur le groupe "flèche droite" et sélectionnez Dupliquer le groupe.

J'ai utilisé les réglages suivants style de calque. .ETAPE 13 J'ai utilisé la outil Rectangle arrondi (U) et la couleur # 516c7f pour créer un bouton à côté du texte d'appel à l'action.

.

J'ai aussi ajouté une ombre et une incrustation en dégradé de cette couche de texte en utilisant les paramètres de l'image ci-dessous. .ETAPE 14 Ensuite. j'ai utilisé l'outil Texte (T) et la couleur # dfe6eb d'écrire un texte à l'intérieur du bouton.

.

. Nommez ce calque «services bg". Double-cliquez sur cette couche et utiliser les paramètres de l'image ci-dessous pour Ombre.ETAPE 15 Créer un nouveau groupe et nommez-le «services». Activez les guides pour vous aider à créer cette forme. Sélectionnez l'outil Rectangle arrondi (U) et de créer un rectangle arrondi avec les dimensions 310px par 250px.

.

Nommez ce calque «barre du haut". ajoutez un Gradient Overlay à cette couche en utilisant les paramètres de l'image cidessous. Faites un clic droit sur cette couche et sélectionnez Créer un masque d'écrêtage.ETAPE 16 Sélectionnez l'outil Rectangle (U) et de créer un rectangle avec le 40px de hauteur et la couleur # 6c818f en haut du rectangle arrondi. . Ensuite.

.

Téléchargez ces icônes vectorielles et ouvrez le fichier de . revenir à Photoshop et de le coller (Ctrl / Cmd + V) comme un objet intelligent. copiez-le (Ctrl / Cmd + C). Allez dans Edition> Transformation (Ctrl / Cmd + T). changer la taille de l'icône et de le mettre en haut du rectangle arrondi. . Nommez ce calque "icône".AI dans Adobe Illustrator. Sélectionnez ensuite l'une de ces icônes.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 paramètres de l'image ci-dessous.

.

ETAPE 19 Créez deux rectangles arrondis plus bleu pour les «produits» et «Présentation» des domaines tels que vous avez fait pour la zone "Services". Jetez un oeil à l'image ci-dessous pour référence.ETAPE 18 Sélectionnez l'outil Texte (T) et écrire un texte pour la zone "services". Utilisez une nouvelle icône pour chaque zone. J'ai créé les points de balle à l'aide de l'outil Ellipse (U). .

Ensuite. ajoutez un effet double course à chaque image en utilisant les paramètres de l'image ci-dessous.ETAPE 20 Ajouter quelques images pour la zone "Produits". .

.

ETAPE 22 Créer un nouveau groupe et nommez-le "blog". Ensuite.ETAPE 21 Sélectionnez l'outil Texte (T) et écrire un peu de contenu pour la zone "Qui sommes-nous" en utilisant la couleur # 42525d. Ajouter une icône en haut de ce rectangle arrondi et écrire le mot "blog" à côté de lui. . créez un nouveau rectangle arrondi bleu comme celui que vous voyez dans l'image ci-dessous (j'ai utilisé les mêmes couleurs et les styles de calque que j'ai utilisé pour les petits rectangles ci-dessus).

.

Utilisez les paramètres de style de calque suivants pour ajouter un effet double course à cette image. sélectionnez l'outil Texte (T) et ajouter du contenu à côté de l'image. Ensuite. .ETAPE 23 Ajouter une image sur le côté gauche de votre zone de blog.

.

ETAPE 25 . Nom "bouton" cette couche. définir le rayon de 4px et la couleur # 6b7881 et créer un petit rectangle arrondi comme celui que vous voyez dans l'image ci-dessous. utilisez l'outil Texte (T) et la couleur # bec8cf d'écrire les mots «Continuer la lecture» »à l'intérieur du rectangle arrondi.ETAPE 24 Sélectionnez l'outil Rectangle arrondi (U). Ensuite.

Ajouter un article plus à l'intérieur de la zone de blog. . ETAPE 26 Sélectionnez l'outil Texte (T) et écrire une déclaration de droits d'auteur au bas de votre mise en page en utilisant la couleur # 566671.

RÉSULTAT FINAL Nous avons terminé! J'espère que vous avez apprécié ce tutoriel et que vous avez appris de nouvelles choses. Restez à l'écoute pour le prochain tutoriel! 22 avril 2010 6 Commentaires . Comme vous pouvez le voir. actions vecteurs icônes sont très faciles à utiliser lors de la conception d'une mise en page Web. Et avec le compte VIP Grafpedia vous aurez accès à tous les vecteurs de Grafpedia.

. c'est pourquoi je suggère d'utiliser un navigateur web moderne comme Firefox. Ce problème ne se produit pas pour les fichiers non cryptés qui sont disponibles pour nos membres Premium . mais je ne vais pas couvrir la conversion PSD à XHTML. dans ce tutoriel. je vais essayer de créer un modèle d'affaires. Aujourd'hui. les navigateurs tels que Internet Explorer Ne sera pas affiché le site correctement. S'il vous plaît noter que.Vous êtes ici: Accueil » disposition de site Web Tutoriels » créer un modèle d'affaires web dans Photoshop Bonjour. il sera disponible sur notre PSD en HTML Section réservées à nos membres Premium Cliquez ici pour voir le Live Preview (CSS / HTML) Parce que cet aperçu en direct a été chiffré. je vais créer une autre mise en page Web (modèle) dans Photoshop et cette fois. je vais vous expliquer comment concevoir que cette mise en page dans Photoshop. Chrome ou Safari. Le tutoriel sur la façon de coder cette mise en page en XHTML.

SiteGrinder 3 va automatiquement convertir cette web modèle de conception Photoshop à partir d'un PSD en HTML site / CSS . Ouvrez Photoshop et créez un nouveau document (Ctrl + N).NO tranchage et pas les compétences de codage requis! Cliquez ici pour en voir plus .. comme un fond choisir # edebe6 ..

je vais écrire Recherche: . c'est pourquoi je vais sélectionner l'outil Rectangle et je vais créer une forme et je vais appliquer ces styles de calque. puis avec Type d'outils.Je vais d'abord sélectionner 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 utilisée: Tahoma). O la droite du logo Je vais créer un formulaire de recherche.

.

pour celui-ci je vais appliquer ces styles de calque: .Après avoir sélectionné l'outil Rectangle je vais créer une petite forme sur le côté droit de la forme créée à l'étape précédente.

.

.

appliquer certains styles de calque: .Tout d'abord. sélectionnez l'outil Rectangle et créer une forme verte. j'ai utilisé # aed1c4 Avec l'outil Rectangle de créer une autre forme. comme une couleur. J'ai utilisé une couleur rouge pour la démonstration propose. Cette forme a les dimensions suivantes: 918 par 62px Ensuite.

Ensuite. j'ai appliqué cette couche styles: . je vais ajouter les liens. Pour chacun d'eux.

Avec l'outil Plume (P) Je vais créer un petit triangle sur la maison lien et je vais appliquer ces styles de calque: .

Ensuite. en utilisant l'outil de ligne je vais créer des séparateurs entre les liens. Pour créer ce dont vous aurez besoin pour régler le poids de l'outil de ligne de 1px .

Je vais ajouter d'abord une ligne plus foncée (# de 8fafa4) ensuite un blanc une (# aad4c6) .

je ferai en sorte que les deux lignes sont sélectionnés sur ma palette des calques et je vais cliquez sur Ctrl + E (pour les fusionner).Ensuite. En couleur. Je vais dupliquer cette couche plusieurs fois (d'avoir un séparateur pour chaque lien) Suivant à l'aide de l'outil Rectangle je vais créer une autre forme. j'ai utilisé # d6e1c7 et j'ai appliqué cette couche styles: .

en utilisant l'outil Plume (P) je vais créer cette forme Grey: .Pour créer un bel effet 3D pour la navigation.

et voici mon résultat: Avec Type d'outil (T). je vais ajouter un peu de texte .Je vais créer un autre sur le côté droit.

généralement la résolution est assez élevé. je vais chercher une image d'entreprise. 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. Suivant un clic droit à nouveau sur la sélection mais cette fois je vais choisir Inverser la sélection . S'il vous plaît noter que lorsque vous ajoutez une image dans Photoshop. Voici mon image Maintenant. je vais sélectionner rectangulaire Outil Marque (M) et je vais faire cette sélection sur ma photo: Je vais clic droit sur mon image (ayant outil Rectangle de sélection choisi) et je vais choisir Feather et je vais utiliser 50px pour Feather Radius.Puis à partir de mes images.

je vais sélectionner l'outil Rectangle et je vais créer une forme alors je vais ajouter cette couche styles: . Pour ce faire.Je vais mettre en mode de fusion à la luminosité et je vais baisser l'opacité à 60% Ensuite. je vais ajouter un bouton sur la région en vedette (en bas du texte).

.

et je vais appliquer une Transformation (Ctrl + T).Ma sortie Maintenant. alors je vais appuyer sur ce bouton pour aller en mode "Wrap" . je voudrais faire cette zone en vedette plus visible. je vais choisir dans ma couche palette la forme principale utilisée pour créer la région en vedette. Pour ce faire.

Lorsque vous serez en mode "Wrap" une grille apparaîtra. Voici sélectionner ce coin. et avec votre souris glisser doucement un peu plus bas Je ferai la même chose pour le côté droit .

Une fois que vous avez terminé. appuyez sur ENTER Mon résultat Avec l'outil Ellipse je vais ajouter cette forme: .

alors je vais sélectionner rectangulaire Outil Marque et je vais faire cette sélection Cliquez sur Supprimer Bouton de votre clavier puis appuyez sur Ctrl + D pour décharger la sélection Voici mon résultat: . je vais aller au Filtre> Atténuation> Flou gaussien et je vais choisir pour rayon 10px. Pour que je sélectionne l'outil Ellipse et je vais créer cette forme Ensuite.La dernière étape pour vedette la région sera de créer des ombres.

appliquez un flou gaussien (Filtre> Atténuation> Flou gaussien) avec un rayon de 12px Mon résultat .une belle et douce ombre. je ne peux pas créer une ombre agréable en utilisant la «méthode standard» . Maintenant. . Malheureusement. je voudrais ajouter une ombre au fond de la forme incurvée.Ensuite. Tout ce que vous avez à faire est de créer 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.outil ellipse. c'est pourquoi je vais utiliser l'outil Pinceau.

Celui-ci est vraiment facile de créer. avec l'outil de type je vais ajouter un peu de texte . Je vais d'abord avec l'outil Rectangle de créer cette forme: Ensuite.

Cliquez ici pour voir le Live Preview (CSS / HTML) Parce que cet aperçu en direct a été chiffré. Chrome ou Safari. les navigateurs tels que Internet Explorer Ne sera pas affiché le site correctement. . c'est pourquoi je suggère d'utiliser un navigateur web moderne comme Firefox. Ce problème ne se produit pas pour les fichiers non cryptés qui sont disponibles pour nos membres Premium . je vais ajouter un peu de texte et avec l'outil Rectangle je vais créer des formes pour "Newsletter". Les boutons oranges utilisent les mêmes styles de calque comme le bouton de la région en vedette. est de nouveau très facile de créer parce que c'est une réplique de la région en vedette. J'ai utilisé les mêmes techniques utilisées pour créer la région en vedette. Si vous m'avez suivi quand j'ai créé la région en vedette que vous serez en mesure de créer le pied de page également. Celui-ci. Avec Type d'outils.Le contenu est maintenant terminé.

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 .

Êtes-vous prêt? Commençons! Héberger vos fichiers HTML sur BlueHost à être plus professionnel ! Nous les recommandons! . Je ferai de mon mieux pour vous guider dans l'ensemble. +1 Annoncez ici Howdy. les gars! Dans ce tutoriel HTML PSD pour vous apprendre à coder la rapide et facile agence de design élégant Landing page Dans Adobe Photoshop . plus d'une personne de conception et ceci est mon premier tutoriel de codage. Je ne suis pas vraiment dans le codage. Nous allons coder cette à partir de zéro et par la fin vous aurez une mise en page superbe et entièrement fonctionnel agence.

Télécharger des fichiers source Les ressources de ce tutoriel   PSD Télécharger SlidesJS Voir la démo .

Étape 2: préparer les dossiers Vous devrez créer un dossier de répertoire et à l'intérieur de celuici. qui devrait fonctionner dans Chrome et Firefox. J'ai utilisé CSS3 styles dans ce tutoriel. Donc. la distance et les couleurs. J'ai utilisé Intype que mon éditeur de texte et les outils que je recommande débogage Web Developer Toolbar et Firebug . Il est important de tester notre code en utilisant différents navigateurs à chaque étape du chemin afin que nous puissions maintenir le cap de notre code. Bien sûr. vous devriez avoir / images répertoire d'images et de / le . Pour IE6 croyez-moi. nous aurons besoin d'aller et venir dans Photoshop (ou un autre outil de retouche d'image) pour mesurer les tailles. assurez-vous que vous ouvrez le fichier PSD dans Adobe Photoshop.  Outils CSS: réinitialisation CSS Temps et de patience :) Étape 1: Préparation de la PSD à Tutoriel HTML Nous savons tous que dans la conversion PSD en HTML / CSS. vous aurez besoin de votre éditeur de code et de débogage des outils préférés. il a toujours l'air bien.

ce seront les noms que nous utiliserons lorsque nous balisage HTML. la tête a une ligne verte sur le dessus qui couvre la totalité de l'écran.  Diapositives: pour le curseur. . Faites attention à la dénomination de id ou class dans chaque capture d'écran que j'ai fait. Nous avons également besoin d'exporter les images à utiliser dans le fichier PSD. Mais si vous êtes fatigué de faire cela. le Logo . vous pouvez simplement télécharger les fichiers et utiliser les images que j'ai déjà exporté. de sorte que pour ce faire. nous serons en utilisant SlideJS . Par exemple. J'ai placé le CSS fichier dans la racine dossier. appel à l'action. L'en-tête contient le logo.  Rubrique: Notez que dans cette section. la navigation et la recherche . vous devez sélectionner le calque du panneau Calques. y compris le HTML fichier. copier et coller dans un autre document et CTRL + ALT + MAJ + S pour enregistrer pour le web et les appareils.répertoire pour JavaScript.  Contexte: vous remarquez que le fond est blanc. nous devons envelopper la tête avec un autre conteneur. nous devons d'abord analyser notre conception en regardant la mise en page Photoshop et identifier les sections qui sont uniques. Étape 3: Mise en page de démarrage simple Pour construire notre mise en page HTML. le type de fichier approprié pour le logo devrait être png .

des services. alors nous allons les envelopper avec un div et nommez-lerécipient .  Média: cette section est divisée en 3 colonnes pour la vidéo. Service: cette section contient deux colonnes pour la conception web et conception de vecteur .  Remarquez la section ci-dessus diapositives. Twitter et Facebook . . et les médias sont positionnés dans le centre.

blog.Aussi. vous remarquerez qu'il est recouvert d'un motif pointillé gris qui couvre la totalité de l'écran. 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. et vers le haut flèche . Widget: cette section est divisée en 3 colonnes pour les liens. le pied de page qui contient 2 colonnes pour le droit d'auteur. et l'emplacement .  Client: Dans cette section. des liens de pied de page. .  Pied de page: Enfin.

Voici l'image de la majoration globale que nous avons fait. .

la base de ces notes.fin tête wrap -> 14 15 < div id = "conteneur" > 16 <div id="slides"> 17 18 contenu des diapositives va ici </ div > <! . nous créons la mise en page HTML suivante. 1 <! DOCTYPE html> 2 <html lang="en"> 3 < tête > 4 <meta charset="utf-8"> 5 < titre > Burnstudio </ titre > 6 < lien rel = "stylesheet" href = "style.service de fin -> .de diapositives -> 19 20 21 22 23 <div id="service"> le contenu du service va ici </ div > <! .css" > 7 </ tête > 8 < corps > 9 10 11 12 13 < div id = "header-wrap" > < tête > contenu d'en-tête va ici </ tête > </ div > <! .Maintenant.

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 dénomination des divs dans chaque section est basée sur la dénomination que nous avons fait plus tôt.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 > <! .à la médiane -> </ div > <! -! Récipient d'extrémité -> 28 29 30 < div id = "widgets wrap" > < div id = "widget" > 31 32 33 contenu widget de passe ici </ div > <! . Notez que cette disposition est une largeur fixe de 960px .24 < div id = "media" > 25 26 27 le contenu des médias va ici </ div > <! . lorsque nous avons analysé la mise en page PSD. Je sais que ce serait mieux si nous .

Mais comme je l'ai dit.fin de l'appel -> 6 <nav class="group"> 7 8 <ul> < li class = "Home" > < a href = "#" titre = "" > Accueil </a > </ li > 9 < li > < un href = "#" titre = "" > Services </ a > </ li > < li > < un href = "#" titre = "" > Qui sommes-nous </ a > </li > 10 11 < li > < un href = "#" titre = "" > Témoignage </ a > </ li > 12 <li class="last"> 13 <div> 14 < entrée de type = "text" nom = "rechercher" espace réservé = "rechercher" /> 15 < entrée de type = "submit" nom = "rechercher" valeur= "go" classe = "rechercher" /> 16 17 </div> </li> . nous allons le faire à partir de zéro. Étape 4: Travailler sur la section en-tête Maintenant passons à se concentrer davantage sur la section d'entête.avons utilisé un framework CSS pour ce projet.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 > <! . nous allons marquer les éléments HTML qui peuvent être trouvés dans cette section. 1 < h1 > < un href = "index.

sans-serif . 10 font-family : Helvetica . Aussi. Maintenant. 4 font-size: 13px.18 </ul> 19 </nav> Dans le code HTML ci-dessus Je viens de suivre ce que j'ai vu dans Photoshop. 12 margin-bottom : 25px . 1 body { 2 fond : #fff . nous allons ajouter le CSS comme suit: Toutes les feuilles CSS doit être ajouté dans le style. Arial . Arial . 11 couleur : # 333333 . Enfin. j'ai créé un < ul>liste qui contient des liens et de la recherche . sans-serif .css fichier. 5} 6 7 / * Styles de police * / 8h 3 { 9 font-size: 24px.css fichier. assurez-vous que vous venez de copier la réinitialisation CSS qui j'ai fourni des ressources et de la placer dansstyle. Suivi par le numéro d'appel qui est enveloppé dans un div avec un id de l'appel . puisque le logo est cliquable j'ai ajouté < a> étiquette à l'intérieur du h2 . 13 } 14 h 4 { . Le premier est le logo . 3 font-family : Helvetica .

verte { 33 couleur : # 509743 .15 margin-bottom : 25px . 31 } 32 . 30 décrire : aucun . a: link. 17 font-family : Helvetica . 18 } 19 h 5 { 20 font-size: 14px. blanc { 36 couleur : #fff . Arial . 34 } 35 . 27 } 28 a. 16 font-size: 18px. . 25 couleur : # 555555 . 26 line-height : 18px . a: visited { 29 text-decoration : aucun . sans-serif . sans-serif . 37 } 38 forte { 39 40 } font-weight : bold . 21 font-family : Helvetica . 22 } 23 p { 24 font-size: 13px. Arial .

Je sais que nous avons utilisé une police différente pour nos rubriques et je ne pense pas les polices Google soutiennent Kozuka gothique . 5} 6 tête { . ce seront utilisées lorsque nous style de texte vert ou blanc qui peut être vu dans la conception. Remarquez aussi j'ai ajouté les classes verteset blanches. nous allons le remplacer par Helvetica . 4 padding-top : 40px . Mais pour l'instant. Lorsque vous testez vous aurez quelque chose qui ressemble à la capture d'écran ci-dessous.41 / * POLICES END STYLES * / Dans le CSS ci-dessus. 1 / * TETE * / 2 # Header-wrap { 3 border-top : 10px solide # 4d9543 . puisque nous avons des styles de réinitialisation nous avons besoin pour le style de nos formats de texte.

8 marge : 0 auto . 19 } 20 21 #call { 22 flotter : droit . 26 } 27 #call h 3 { 28 marge : 0 . 32 marge : 0 . 25 margin-top : 20px . 9 rembourrage : 0 .7 largeur : 960px .png) no-repeat . 10 } 11 tête h 2 un { 12 affichage : bloc . 18 margin-bottom : 40px . 14 fond : url (images / logo. 24 padding-right : 25px . 29 } 30 #call h 4 { 31 text-align : droit . 23 border-right : 1px solide # c8c8c8 . . 15 largeur : 214px . 17 flotter : gauche . 16 hauteur : 77px . 13 text-indent : -999999px .

# 3b7c33 ). à ( # 3b7c33 )).33 } 34 35 pas { 36 claire : les deux . # 5fae53 . # 3b7c33 ). 40 -webkit-border-radius: 30px . 47 48 / * Firefox 3.10+ * / 52 background-image : o-linear-gradient ( top . 51 / * Opera 11. # 5fae53 . 54 } 55 56 nav ul li{ . # 5fae53 . Chrome 10 + * / background-image : -webkit-linear-gradient ( top . # 3b7c33). 45 46 / * Safari 5. 41 background-color : # 3b7c33 . mobile Safari. 43 / * Safari 4 +. à partir de ( # 5fae53 ). 0% 0% . 38 hauteur : 50px . / * repli * / 42 border-radius: 30px . # 5fae53 . 37 largeur : 960px . 53 frontière : 1px solide # 336c2b . 39 -moz-border-radius: 30px. 0% à 100%. Chrome 1-9 * / 44 background-image : -webkit-gradient (linéaire. 49 / * IE 10 + * / 50 background-image : -ms-linear-gradient ( top . # 3b7c33 ).1+.6+ * / background-image : -moz-linear-gradient ( top .

64 fond : url (images / home. 78 font-size: 15px. 71 margin-right : 20px . 77 line-height : 50px . 81 } 82 nav ul li a: hover { . 69 border-right : aucun . 80 text-shadow : 0 1px 0 # 387031 . 70 flotter : droit . 58 border-right : 1px solide # 336c2b . 75 rembourrage : 0 30px . 59 border-left : 1px solide # 78c368 .home{ 62 border-left : aucun . 79 couleur : #fff . 72 } 73 nav ul li a{ 74 affichage : bloc .57 flotter : gauche . 63 text-indent : -9999px . 60 } 61 nav ul li. 76 hauteur : 50px . 65 } 66 67 nav ul {li.last 68 border-left : aucun .png) no-repeat 50% à 50% .

97 border-left : aucun . 99 border-bottom : 1px solide # 5ead52 . 100 border-top : 1px solide # 346d2c . 98 border-right : aucun . 89 border-top-left-radius: 30px .home a: hover { 87 -webkit-border-top-left-radius: 30px . 102 text-shadow : 0 1px 0 # 387031 . . 91 fond : # 5fae53 url (images / home. 92 } 93 nav ul li div input[type=text]{ 94 -webkit-border-radius: 20px . 88 -webkit-border-bottom-left-radius: 30px . 96 fond : # 4b9241 . 105 } 106 nav ul li div entrée [type = text]: focus { 107 108 } décrire : aucun . 103 rembourrage : 5px 0 5px 20px .png) no-repeat 50% à 50% .83 fond : # 5fae53 . 95 -moz-border-radius: 20px. 84 } 85 86 nav ul li. 104 largeur : 200px . 101 couleur : #fff . 90 border-bottom-left-radius: 30px .

Notez que pour obtenir cette valeur. Ensuite. cela remplira toute la largeur de l'écran. Pour l' appel je flottais à droite et appliquer une bordure grise 1px aussi un rembourrage de 25px de droite. 113 } 114 :-Moz-réservé { 115 couleur : #fff . 122 margin-left : 15px .Webkit-entrée-espace réservé { 112 couleur : #fff . 123 hauteur : 50px . 125 } 126 127 / * FIN-TETE * / Dans le CSS ci-dessus Je style tête-wrap avec une bordure verte de 10px. vous devez revenir à Photoshop et utiliser . 124 largeur : 16px . depuis un div par défaut est de style dans un bloc d'affichage. 121 text-indent : -999999px . J'ai aussi flottais il gauche. j'ai centré la tête avec margin: 0 auto . Je style du logo avec une largeur et une hauteur fixe. 120 frontière : aucun . Ensuite.109 110 / * Le style PLACE PORTE * / 111 :: . 116 } 117 118 nav entrée ul li div [type = submit] { 119 fond : url (images / search.png) no-repeat 50% à 50% .

[If IE]> 2 <Script type = "text / javascript"> 3 (Function () { 4 var = html5elmeents . Tout unrembourrage de 30px est de style de gauche et de droite 0 pour haut et en bas. la hauteur et une pente. nous devons le remettre à zéro et changer à 0. Cela rendra le h4 et h3 dans la section d'appel de retour à la normale. aussi il a une frontière gauche et à droite. Je style de la navigation avec une largeur fixe. il n'y a pas de frontière droite. Ensuite. Enfin. Depuis que j'ai appelée le H3 et H4 avec une marge inférieure 25px dans notre format de texte de base. Cela permettra éléments HTML5 pour travailler dans les anciens navigateurs IE. Depuis le coin est arrondi nous avons besoin de spécifier un autre vol stationnaire de style pour le bouton d'accueil que ce que j'ai fait en dessous de la a: hover . Tous li flottent à gauche. sauf pour la la maison il ya pas de frontière gauche et pour la dernière.l' outil Règle (I) pour mesurer la distance. un line-height de 50 à rendre centrer verticalement. un fond vert. une ombre du texte. bordure noire sur la bordure supérieure et de la lumière sur le fond. d'une hauteur de 50. sauf pour le dernier élément li. Je style l'entrée de recherche avec un rayon arrondi. 1 <! . Avant de prévisualiser ce à IE versions inférieures assurez-vous de copier et coller le code ci-dessous dans la section d'en-tête de notre fichier HTML. Pour la classe à la maison j'ai poussé sur le texte et le remplacer par l'icône de la maison. Aussi pour cibler espace réservé attribut reportez-vous à la CSS qui je commente le lieu porte de style c'est une partie de la propriété de CSS3. j'ai appliqué une fois pour effacer le dessus flottant éléments clairement logo et appel .

Choisissez une large gamme de produits d'exploitation. Parce que la très grande. 10 11 </ Script> <![endif]--> Maintenant. 1 < div class = "slides_container" > 2 3 4 <div> < img src = " http://www. i ++) { 6 document.com/wpcontent/uploads/2012/09/slide1.createElement (html5elmeents [i]). 7 } 8 } 9 ) ().1stwebdesigner. 5 for (var i = 0.split('|').length. mais .png " alt = "slide1" /> < div class = "slide-droit» > 5 < h1 class = "slide-rubrique« > Artthatworks 1 dolor sit amet. notre modèle doit ressembler à cela. </ h1 > 6 < p class = "info" > C'est une plate-forme lorem. consectetur adipiscing elit. nous allons ajouter du contenu à l'intérieur du diapositives élément. Étape 5: Travailler sur la section Curseur Maintenant. i <html5elmeents. voici le code HTML."address|article|aside|audio|canvas|command|datalist|details|dialog|figure |figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby| section|time|video".

et le porche de la Chine réunis. </ p > 16 17 18 < p > < un href = "#" classe = "lire la suite" > Lire la suite </ a > </ p > </div> </div> 19 20 21 22 23 <div> < img src = " http://www. Parce que la très grande. Peu importe le cours des compétences de la criminalité et moteur chez les patients de football maintenant. </ h1 > < p class = "info" > C'est une plate-forme lorem. </ h1 > < p class = "info" > C'est une plate-forme lorem.Choisissez 24 une large gamme de produits d'exploitation.1stwebdesigner. consectetur adipiscing elit. Parce que la très grande. </ p > 7 < p > < un href = "#" classe = "lire la suite" > Lire la suite </ a > </ p > 8 9 </div> </div> 10 11 12 13 14 <div> < img src = " http://www.png " alt = "slide1" /> < div class = "slide-droit» > < h1 class = "slide-rubrique« > Artthatworks 2 dolor sit amet. Peu importe le cours des compétences de la criminalité et moteur chez les .pas toujours et les mâchoires. et le porche de la Chine réunis.com/wpcontent/uploads/2012/09/slide1. consectetur adipiscing elit.1stwebdesigner.png " alt = "slide1" /> < div class = "slide-droit» > < h1 class = "slide-rubrique« > Artthatworks 3 dolor sit amet.com/wpcontent/uploads/2012/09/slide1. et le porche de la Chine réunis. 15 mais pas toujours et les mâchoires.Choisissez une large gamme de produits d'exploitation. mais pas toujours et les mâchoires. Peu importe le cours des compétences de la criminalité et moteur chez les patients de football maintenant.

voici le CSS. j'ai ajouté une classe pour la rubrique slidetitre . nous allons le style tout l'élément.Ce sera utile. Aussi.slides_container { 11 12 } hauteur : 315px . 4} 5 / * COULISSES * / 6 #slides { 7 Position : rapport . Maintenant. </ p > 25 < p > < un href = "#" classe = "lire la suite" > Lire la suite </ a > </ p > 26 27 </div> </div> 28 </ div > <. 1 #container { 2 largeur : 960px . 8 margin-top : 40px . 3 marge : 0 auto . info. 9 } 10 .patients de football maintenant. paragraphe infos et pour le lire plus readmore . une div class dediapositives droite qui détient le titre de la diapositive. et en savoir plus lien.conteneur de fin -> Dans le balisage HTML ci-dessus j'ai ajouté une classe slides_container ce tiendra nos éléments de diapositives qui est enveloppé par un div qui contient une image. . car nous allons répéter le code HTML 3 fois et ils auront les mêmes styles si l'on ajoute le CSS plus tard.

droit .slide.readmore { 36 margin-left : 155px . 29 } 30 .png) no-repeat .info { 31 largeur : 395px .readmore { .droit { 14 Position : absolue . 33 margin-left : 155px . 34 } 35 . 15 top : 0 . 24 font-size: 24px. 37 } 38 . 32 margin-bottom : 20px . 17 } 18 19 .slide. 23 couleur : #fff .droit . 21 largeur : 494px .slide-titre { 20 fond : url (images / slide-heading. 25 padding-top : 20px .13 .slide. 22 hauteur : 68px . 26 padding-left : 80px . 27 margin-top : 35px . 16 gauche : 385px . 28 margin-bottom : 30px .

59 fond : url (images / pagination. 41 couleur : # 509743 .png) no-repeat .readmore: hover { 46 couleur : # c8c8c8 . 47 48 } 49 . 42 padding-left : 15px . 53 z-index: 99.pagination li{ 57 flotter : gauche . 40 text-decoration : aucun . 51 bas : 25px . 58 margin-right : 10px . 60 background-position : top .png) no-repeat 0 à 50% . 61 largeur : 14px . 54 } 55 56 ul. 44 } 45 .39 font-style : italic . 43 fond : url (images / more. 63 } .pagination { 50 Position : absolue . 62 hauteur : 15px . 52 gauche : 25px .

88 largeur : 7px . 70 } 71 72 a. 85 droit : 50px . 75 bas : 30px .next { 73 Position : absolue .png) no-repeat . 79 fond : transparent url (images / prev-next. . 81 text-indent : -9999px . 82 } 83 a. 77 largeur : 7px .current{ 65 background-position : en bas .64 ul.prev { 84 Position : absolue . 87 affichage : bloc . 69 text-indent : -999999px . 80 background-position : top droit . 74 droit : 25px .pagination li.pagination li a{ 68 affichage : bloc . 66 } 67 ul. 76 affichage : bloc . 86 bas : 30px . 78 hauteur : 13px . 89 hauteur : 13px .

next: hover { 95 background-position : en bas à droite . 91 background-position : top gauche . 0 en tête. 99 } 100 / * COULISSES DE FIN * / Dans le CSS ci-dessus depuis des diapositives. le service et les médias sont enveloppés avec le conteneur div. Pour le slide-rubrique je lui ai donné une largeur et une hauteur fixe égale à l'image d'arrière-plan. «tobogganposition est mis à par rapport à en faire l'élément parent. nous allons le style de cette première à rendre centrées.readmore début. Ensuite. 92 text-indent : -9999px .png) no-repeat . 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 .prev: hover { 98 background-position : en bas à gauche . 93 } 94 a. Ceci est utile afin que nous puissions placer les éléments à l'intérieur précédent. également une marge de donner un espace et l'aligner correctement.90 fond : transparent url (images / prev-next. suivant. Pour . et il a poussé 385px de gauche. l'information et en savoir plus. et lui a donné un rembourrage de faire le align texte correctement. et la pagination qui sont absolument généré automatiquement par le JavaScript.info je lui ai donné une largeur fixe avec une marge pour l'aligner. Pour la slides_container J'ai donné une hauteur fixe de 315px qui est égale à la hauteur de l'image de curseur. Pour la glissière de droite qui contient le titre. tous positionnés absolument. Pour . 96 } 97 a.

Pour la pagination. Remarqué la prev-next. il est positionné à droite. si vous utilisez Chrome juste un clic droit sur l'élément et cliquez sur Inspecter l'élément d'un dialogue apparaît et vous pouvez y voir ce que l'élément est utilisé. . nous allons ajouter le script jQuery requis dans l'entête.js fichier à partir de la source / répertoire et de le coller dans notre / jsrépertoire. et pour le vol stationnaire juste changer le haut en bas. aussi j'ai postulé z-index 99px . Pour la pagination J'ai placé absolument. le mis 25px du bas et de gauche. Puis suivi par le style de readmore qui a une couleur verte avec un fond flèche et un vol stationnaire gris. il a donné une bonne marge de 10px. . et prochaines boutons: auto-généré par le JavaScript afin de coiffer ce nous devons d'abord identifier ce qui est le tag ou le html appliquée attribut de classe . Copiez leslides. Maintenant.min. a ajouté une image de fond avec une largeur et une hauteur fixe. Si Werre ne va pas appliquer le présent avis qu'il n'est pas cliquable.next l'image en haut à droite. J'ai placé la . nous allons cibler dans le CSS.pngsur le côté gauche il contient l'image du bouton prev et sur le côté droit il contient l'image du bouton à côté.ce qui fera la pagination droit sur le très haut par rapport aux autres éléments.prev à peu près le même que nous avons fait dans la pagination.Pour ce faire. car l'image de l'état normal est sur le dessus.next et . Pour la . J'ai placé l'arrière-plan par défaut de la page. Puis je flottais les pagination li éléments à gauche.n'a pas de marges de gauche. pour le courant ou l'état actif nous allons inverser le positionnement de haut en bas et enfin l'afficher comme un élément de niveau bloc et masquer le texte.prev positionné en haut à gauche. vous devez utiliser le Firebug outil si vous utilisez Firefox. mais cette fois. Maintenant que vous savez l'élément. car l'image est au-dessus de la pagination lui-même.jquery. prev .

min.js" > </ script de > Enfin.js " > </ script de > 2 < scénario src = "js / slides.min. }). 5 generateNextPrev: true.5.1 < scénario src = "https://ajax.jquery. 8 </ script de > Maintenant. Diapositives ({ 4 précharge: vrai.com/ajax/libs/jquery/1. . 6 7 }). Vous devez ajouter ce script juste avant la balise </ body>. notre modèle doit ressembler à cela.1/jquer y. Voici le JavaScript. nous devons ajouter le code JavaScript qui permettra le curseur de travailler sur notre mise en page. 1 < scénario > 2 $ (Function () { 3 $ ('# Diapositives »).googleapis.

voici le code HTML.vecteur de fin -> J'ai créé un div id unique Web et vecteur qui contient les mêmes éléments comme une image. E-commerce. .fin web -> 7 8 < div id = "bâtons" > 9 10 < img src = "images / vector. un seul sport le plus excitant intéressante. </ p > 5 < p > < un href = "#" classe = "lire la suite" > Lire la suite </a > </ p > 6 </ div > <! . cette poussière à l'emballage. les paragraphes et lien readmore. les titres.png" /> < h3 > Vecteur < forte > < durée classe = "vert" > Conception </durée > </ fort > </ h3 > < p > Maintenant viverttra et laide bio diesel. Dans la rubrique. vous pouvez voir. 4 l'ordinateur portable de l'adaptateur sur la frange de la cuve. l'ordinateur portable de l'adaptateur sur la frange de la cuve. 1 < div id = "Web" > 2 3 < img src = "images / web. cette poussière à l'emballage. un seul 11 sport le plus excitant intéressante.png" /> < h3 > Web < forte > < durée classe = "vert" > Conception </durée > </ fort > </ h3 > < p > Maintenant viverttra et laide bio diesel. </ p > 12 < p > < un href = "#" classe = "lire la suite" > Lire la suite </a > </ p > 13 </ div > <! . E-commerce. j'ai ajouté une durée et appliqué une classe de vert puisque le cap est combiné avec une couleur différente.Pour le plus lu lien nous appliquons la même classe que nous avons fait dans la zone du curseur. nous allons ajouter du contenu à l'intérieur du service de l'élément.Étape 6: Travailler sur la section service Maintenant.

21 } 22 #vector { 23 flotter : droit . 12 padding-left : 30px . nous allons le style tout l'élément. 5 padding-top : 30px . . 16 margin-bottom : 20px .Maintenant. 20 margin-right : 50px . 7} 8 9 #Web { 10 flotter : gauche . 6 fond : url (images / service bg. 24 padding-left : 30px . 13 } 14 #Web p { 15 largeur : 260px . 1 / * SERVICE * / 2 #service { 3 margin: 40px auto.jpg) no-repeat . 17 } 18 #Web img { 19 flotter : droit . 11 largeur : 450px . 4 hauteur : 253px . voici le CSS.

35 } 36 / * FIN SERIVCE * / Je style du Service div 40px du haut vers le bas et ajouté une auto gauche et à droite. Maintenant.25 largeur : 450px . Pour le paragraphe que je lui ai donné une largeur fixe avec une marge. 31 } 32 #vector img { 33 flotter : droit . notre modèle doit ressembler à cela. 30 margin-bottom : 20px . j'ai également ajouté une hauteur qui est égale à l'image de fond. à peu près la même sur l'image de vecteur et texte. . même avec le vecteur div mais flottais vers la droite. 34 margin-right : 50px . Pour le web div je flottais vers la gauche et lui a donné une largeur de 50% de la div parent. 26 } 27 28 p {#vector 29 largeur : 260px . pour l'image que je flottais à droite et lui donner une marge de droite.

png" alt = "Play" /> </ a > </div> 7 8 < div id = "Twitter" > .Étape 7: Travailler sur les médias Section Maintenant. voici le code HTML. nous allons ajouter du contenu à l'intérieur du média élément. 1 < div id = "medium" classe = «groupe» > 2 < div id = «je vois» > 3 < h4 > rapide < forte > Tour Vidéo </ fort > </ h4 > 4 < h5 > Comment nous concevons nos œuvres! </ h5 > 5 6 < un href = "#" classe = "Play" > < img src = "images / play.

mash. 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. nous allons le style de tous les éléments.9 < h4 > Twitter < forte > < durée classe = "vert" > RSS </durée > </ fort > </ h4 > < p class = «tweet» > Mashable Vidéo: Démission principaux après avoir prétendument faisant passer pour un étudiant sur Facebook 10 < un href = "#" classe = "t-lien" > http://on. .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 > < durée classe = "vert" > Facebook </ durée > </ fort > </ h4 > 16 17 </div> 18 </ div > <! . 1 / * Médias / 2 3 #media { 4 5} marge : 0 auto . j'ai ajouté une classe groupe sur lesmédias div. Je vais vous montrer ce que ça fait quand on passe à la CSS. h5 et une image cliquable pour bouton de lecture.à la médiane -> J'ai créé 3 sections différentes: vidéo div qui contient du texte rubriques h4. voici le CSS. twitter div qui contient un titre et un paragraphe. Maintenant.

13 } 14 #video h 4 { 15 marge : 0 . 25 margin-top : 5px .. 9 flotter : gauche .png) no-repeat . 26 } 27 28 #Twitter { 29 largeur : 285px . #video h 5 { 18 text-align : centre . 20 text-shadow : 0 1px 0 # 387031 . 12 hauteur : 225px . 10 margin-right : 58px .6 #video { 7 largeur : 302px . 11 fond : transparent url (images / vidéo bg. 30 hauteur : 180px . 8 padding-top : 20px .play { 24 flotter : droit . 16 } 17 #video h 4 . 19 couleur : #fff . 21 } 22 23 #video . .

33 fond : transparent url (images / twitter-bg. 36 } 37 #Twitter p { 38 rembourrage : 0 20px .time { 41 font-size: 11px. 53 } 54 55 / * FIN MEDIA * / . 35 rembourrage : 0 0 20px 0 . 42 font-style : italic .png) no-repeat . } 49 50 #faceb ook { 51 largeur : 285px . 52 flotter : droit . } 48 au-link: hover { text-decoration : souligner . 45 } 46 47 au-link { color : # 6767c9 . text-decoration : aucun . 44 margin-top : 15px . 43 couleur : # 999999 . 39 } 40 #Twitter . 32 margin-right : 30px . 34 background-position : en bas .31 flotter : gauche .

Qu'est-ce que cela signifie. il a donné rembourrage. c'est le média est l'élément parent qui détient des éléments enfants à l'intérieur de celui-ci qui sont gauche flottant ce sont la vidéo. Maintenant. pour le bouton de lecture qui a une classe de .56 57 / * FIX CLEAR * / 58 . Pour facebook c'est le même twitter cap et flottait à droite. Le but de la groupe classe est de forcer l'élément auto-clair ses enfants aka clearfix. Je style h4 et h5 centrée et ajouté une ombre portée. .play je flottais vers la droite et a ajouté une marge pour le positionner sur la droite.qui a une couleur bleue. L'élément de support ne détermine pas sa hauteur lorsque nous appliquons ces clearfix pirater ce sera d'identifier la identifier automatiquement la hauteur maximale de l'élément enfant.group: après { 59 contenu : "" .time avec une police plus petite et plus légère appelant. Pour twitter div je lui ai donné une largeur et une hauteur fixe de 258px par 180px et a ajouté une image de fond positionnée en bas. 61 claire : les deux . aussi pour lelien au. twitter et facebook. aussi j'ai donné le . notre modèle doit ressembler à cela. 60 affichage : table. 62 } 63 / * FIN FIX * / Je style la vidéo div avec une largeur et une hauteur fixe de 302px x 225px. flottait vers la gauche et enfin ajouté une image de fond.

élément. nous allons ajouter du contenu à l'intérieur du widget. 1 < div id = "widgets wrap" classe = «groupe» > 2 < div id = "widget" > 3 4 < div id = "liens" > < h4 classe = "blancs" > Autres < forts > Liens </ solides > </ h4 > .Etape 8: Travailler sur la section Widget Maintenant. voici le code HTML.

5 <ul> 6 < li > < un href = "#" > www.outgoinglink.labzip.com </ a > </ li > 9 < li > < un href = "#" > www.com </ a > </ li > </ul> </div> 14 15 16 17 18 19 20 21 <div id="blog"> < h4 classe = "footer-tête blanc" > Dernières nouvelles de la < forte > Blog </ fort > </ h4 > <img src="images/blog.30.com </ a > </ li > 7 < li > < un href = "#" > www.com </ a > </ li> < li > < un href = "#" > www.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-tête blanc" > Notre < forte > Localisation </ fort > </ h4 > 25 < img src = "images / map.samplelink.link.png" alt="blog" /> < p class = "title" > n'est pas un problème les gars.1stwebdesigner.com </ a > </li > 10 11 12 13 < li > < un href = "#" > www.png" alt = "map" /> 26 < p class = "adresse" > 123 rue inconnue.com </ a > </li > 8 < li > < un href = "#" > www. </ p > <p class="date">05. adresse 27 </ br > 8600 Philippnes </ p > .example. mon ePakistan ou lorem ciblée à travers le pays.

28 </ div > <! . Enfin.jpg). 5} 6 #widget { 7 largeur : 960px . 4 fond : # 333333 url (images / widgets bg.widget fin -> 30 </ div > <! -! fin de widgets wrap -> J'ai ajouté une classe groupe de Widget Emballage. le blog qui contient un en-tête.Ensuite.png) no-repeat . Emballage { 3 rembourrage : 50px 0 . j'ai créé 3 div liens qui contient une liste non ordonnée. 13 text-indent : 30px . voici le CSS. 14 } 15 #links { 16 largeur : 225px . image. et l'adresse. 8 marge : 0 auto . Maintenant. 12 line-height : 58px . 9 } 10 h 4 . vous savez déjà ce que cette classe fait.emplacement de fin -> 29 </ div > <! . titre. nous allons le style tout l'élément.footer-tête { 11 fond : transparent url (images / footer-header. l'emplacement qui contient une image. 1 / * WIDGET * / 2 # Widget. 17 flotter : gauche . . date et lien En savoir plus.

23 } 24 #links ul li a { 25 couleur : #CCCCCC . 41 top : 50px . 37 margin-right : 75px . 35 largeur : 290px .18 margin-right : 75px . 38 } 39 img #blog { 40 Position : absolue . 19 } 20 #links ul { 21 list-style-image de : url (images / links. 32 } 33 #blog { 34 Position : rapport . 36 flotter : gauche . 29 } 30 #links ul li a: hover { 31 couleur : #fff . 42 gauche : -18px . 27 rembourrage : 8px 0 . 43 } . 28 affichage : bloc .png). 22 margin-left : 15px . 26 font-size: 13px.

62 largeur : 290px . 63 flotter : droit . 51 couleur : #CCCCCC . 48 } 49 p.44 p. 53 font-size: 11px. 54 margin-bottom : 15px . 67 top : 45px .title #blog { 45 couleur : #fff . 59 } 60 #location { 61 Position : rapport . 47 margin-bottom : 15px . 55 } 56 57 a. 69 } . 46 margin-left : 110px . 52 font-style : italic .readmore #blog { 58 margin-left : 110px . 68 gauche : 22px . 64 } 65 #location img { 66 Position : absolue .date #blog { 50 margin-left : 110px .

appliquer une marge de 75px et positionner relativement. et ajouté 58px hauteur de la ligne pour rendre le texte centré verticalement. Pour le titre. flotté à gauche et lui donner un 75px de marge de droite. et pour l'adresse j'ai ajouté marge et rembourrages et lui donner une bordure de 1px vers la droite. J'ai ajouté une image de fond.address { 71 margin-top : 115px .title . Pour le blogue div je lui ai donné une largeur de 290px. . Pour le widget de div je appled 960px de largeur et la position qu'il centré. j'ai aussi appelée le unpar un vol stationnaire gris plus clair et de blanc (je n'ai pas suivi l'effet de survol dans la conception PSD). Maintenant. modèle. 73 padding-right : 20px . Pour le Blog img car nous venons positionnés Blog div rapport.70 #location p. flotté à gauche. notre modèle doit ressembler à cela. fond gris.date et.readmore ils ont les mêmes marges de gauche. pour le ul liste. Pour la . en retrait du texte. 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é. Pour les liens div je lui ai donné une largeur de 225px. . 72 border-right : 1px solide # 484848 . Pour connaître l'emplacement même aussi dans le blog où il est positionné relativement et positionner l'image dans absolument. nous pouvons maintenant placer ce absolument pour positionner l'image même de la conception psd qui reste 18px. j'ai ajouté un backround.

Étape 9: Travailler sur la section client Maintenant. voici le code HTML. 1 <div id="client-wrap" class="group"> . nous allons ajouter du contenu à l'intérieur du client élément.

jpg" alt = "" /> </ li > < li > < img src = "images / la client-5.fin client Emballage -> En HTML ci-dessus.2 <div id="client"> 3 4 5 6 7 8 <ul> < li > < img src = "images / la client-1.jpg" alt = "" /> </ li > < li > < img src = "images / la client-2. nous allons le style tout l'élément. voici le CSS. 5 border-bottom : 1px solide # c8c8c8 .jpg" alt = "" /> </ li > 9 </ul> 10 </ div > <! . 1 / * CLIENT * / 2 # Client-wrap { 3 fond : #fff url (images / client-bg.client final -> 11 </ div > <! . 6} 7 8 #client { 9 largeur : 960px . Maintenant. j'ai ajouté un nouveau groupe classe sur client-wrap div et ajouté un élément de liste à puces qui contient une image.jpg" alt = "" /> </ li > < li > < img src = "images / la client-4. .jpg" alt = "" /> </ li > < li > < img src = "images / la client-3. 4 rembourrage : 40px 0 .jpg) repeat-x .

17 } 18 / * FIN DU CLIENT * / Dans le CSS ci-dessus Je style du client Emballage div en ajoutant un peu de gris fond dégradé.10 marge : 0 auto . 16 text-align : centre . enfin j'ai appliqué text-align à faire la centre des images. notre modèle doit ressembler à cela. J'ai placé centrer le client div et enfin pour les éléments de la liste à puces qui contient les images que je flottais il a quitté. Maintenant. puisque nous avons 5 images je divisé uniformément en donnant une largeur de 20% de chaque élément. 15 flotter : gauche . 11 } 12 13 #client ul li{ 14 largeur : 20% . . les marges supérieure et inférieure 40px et enfin ajouté une bordure inférieure grise solide.

.

nous allons ajouter du contenu à l'intérieur du pied de page élément.Étape 10: Travailler sur la section Pied de page Maintenant. puis créé l'article 2 est le premier pied gauche qui contient le texte .1stwebdesigner. voici le code HTML. 1 < footer classe = «groupe» > 2 3 4 < div id = "footer-gauche" > < p > Droit d'auteur < un href = "#" classe = "vert" > www.png"alt = "back-haut" classe = "back-haut" /> </ a > 18 </ footer > En HTML ci-dessus.com </ a > </ br > Conçu par < un href = "#" classe = "vert" > Michael Burns </a > </ p > 5 </div> 6 7 8 < div id = "footer-right" > <ul> 9 < 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 = "#" > Témoignage </ a > </ li > 13 < li > < un href = "#" > Contactez-nous </ a > </ li > 14 15 </ul> </div> 16 17 < un href = "# header-wrap" > < img src = "images / backtop. j'ai ajouté un groupe classe au pied de page.

7 Position : rapport .d'auteur.gauche a: hover { 19 couleur : # c8c8c8 . Maintenant. Enfin.gauche { 11 flotter : gauche . à côté pied droit . 12 largeur : 50% . nous allons le style tout l'élément. 13 } 14 # Footer. 16 couleur : # 666666 . 4 largeur : 960px .droit { 22 flotter : droit . j'ai ajouté cliquable vers le haut l'image. 20 } 21 # Footer. voici le CSS. 1 / * Création * / 2 Pied de page { 3 claire : les deux .gauche {p 15 font-size: 12px. 5 marge : 0 auto . 6 rembourrage : 30px 0 60px 0 . 17 } 18 # Footer. qui contiennent un des liens de la liste à puces. . 8} 9 10 # Footer.

23 largeur : 50% . 41 } 42 # Footer. 35 } 36 # Footer.droit ul li a { 37 couleur : # 666666 .droit ul { 26 flotter : droit . 31 } 32 33 # Footer. 27 } 28 # Footer. 39 padding-bottom : 10px . 40 font-size: 12px. 30 margin-right : 30px .droit li ul: last-child { 34 margin-right : 0 .haut { 47 Position : absolue .back.droit ul li a: hover { 43 border-bottom : 2px solide # c8c8c8 . 44 } 45 46 . 24 } 25 # Footer. 38 affichage : bloc . .droit li ul { 29 flotter : gauche .

Pour les liens je flottais l' ul vers la droite et flottais li à gauche. 50 51 } 52 / * Création * FIN / En CSS ci-dessus Je style du pied de page en donnant une largeur de 960px. notre modèle doit ressembler à cela. pour le dernier enfant j'ai enlevé la marge. 49 droit : 50% . Maintenant. pour les liens que j'ai style il de même avec le texte de copyright et ajouté 2px frontière lorsque son plané. en flottant à gauche et à droite.48 bas : 30px . appliqué un rembourrage de 30px 60px haut et en bas. . je lui ai donné une largeur de 50%. centrée elle. depuis que j'ai positionné le pied relativement. Pour le texte de copyright je l'ai fait plus petit et changé la couleur pour une plus légère. Pour lepied gauche et le pied de page à droite . enfin je positionné relativement. je peux placer le back-dessus absolument au centre qui est juste 50%. Enfin. a donné une marge de 30px.

.

des suggestions s'il vous plaît partager et déposez-le ci-dessous. nous allons lui permettre de répondre! Si vous avez aimé ce tutoriel bien vouloir le partager avec vos amis. des commentaires. enfin! Wew! Cette m'a fallu si longtemps pour écrire. Aussi. pour le prochain tutoriel. Ouais! Vous avez bien entendu. Si vous avez des techniques. Merci! :) .Nous avons fini. Comment était le tutoriel? J'espère que vous avez appris quelque chose de ce tutoriel. je vais vous apprendre à faire de cette disposition sensible.