De PSD en HTML (* .psd Template Convertir en HTML conception de site Web)

Qu'est-ce que vous aurez besoin:

• Adobe Photoshop.
  
• PSD Fondements de leçon de fichier de conception de l' interface. Si vous n'avez pas terminé cette leçon, le fichier PSD, vous pouvez télécharger une image
  
• Pauvre éditeur de texte. J'aime Notepad ++
  

Note: Je ne l' utilise dreamweaver. Bien que ce soit une excellente application, mais je préfère écrire le code à partir de zéro, à la main.

Première partie: Visualisation CSS et HTML.

Avant que je commence à faire quelque chose que je considère interface. Qu'est - ce que je peux faire en utilisant le CSS / HTML? Que dois-je couper? Cela permet d'économiser du temps et conduit à l'obtention d'excellents résultats souvent.

Quelle section voyez-vous?

Voilà ce que je pense quand je le fais:

Ce qui suit peut être réalisée en utilisant CSS

• la taille de l'interface et de placement.
  
• texte en couleur et des liens, leur taille, etc.
  
• Placement de panneaux, de leur taille, les cadres et la couleur d'arrière-plan.
  
• Cadres autour des icônes.
  
• La ligne horizontale entre les sections du corps.
  

Je dois couper le suivant

• Icônes dans l'en-tête (y compris la page icône active).
  
• caps Schedule, y compris le logo et les mots «Designs partie numérique».
  
• chapeaux d'arrière-plan.
  
• fond Gdlyaentny l'ensemble du site.
  
• fond Gdlyaentny caps panneaux.
  
• footer (la partie inférieure du site)
  
• A triangles de navigation.
  

Deuxième partie: Couper l'interface.

Je travaille dans le tranchage parallèle et rendre le code CSS / HTML. Ceci est la méthode la plus rapide de ceux que j'essayé de travailler sur mes projets. Toutefois, si vous travaillez dans un groupe, il est préférable de le faire chaque procédure séparément.

Note: Tout au long de ce tutoriel , je vais utiliser Photoshop. Cependant, pour la coupe, je vous recommande d' utiliser Adobe Image Ready ou Adobe Fireworks, à moins bien sûr que vous avez ces programmes.

Eh bien, nous allons commencer!

Ouvrez le PSD, j'ai présenté au début de cette leçon.

Le premier fragment de votre coupe.

Appuyez sur K, qui est utilisé pour sélectionner Slice Outil et dessiner une sélection autour du logo et le nom du site , comme indiqué sur la figure.

Faites un clic droit sur le fragment et choisissez Modifier Options de tranche. Nommez ce fragment header_title, puis cliquez sur OK.

Rappelez-vous ces deux étapes, car à partir de maintenant, je serai moins détaillée dans leurs explications.

Créer une autre tranche de sélection largeur 1px près de ce que vous venez de faire et l' appeler header_bg. Vous devriez finir comme illustré ci-dessous.

Créer des icônes vіdelenie autour de la maison (y compris la maison photo) et nommez icon_home. Assurez - vous que la sélection a la taille 60H54px.

Répétez ce processus pour les icônes restantes.

Faites une sélection à côté de l'inscription sur le panneau d'accueil, large et 19px hauteur 1px. Appelez panel_bg.

Faites une sélection autour d' un des triangles et l' appeler un triangle ralenti. Assurez - vous que la longueur et la hauteur de cette séparation est 13px.

Petite astuce: Maintenez enfoncée la touche Maj enfoncée pendant que vous dessinez une sélection et vous obtenez un carré parfait.

Faites une sélection autour de l'ensemble pied de page et nommez - le pied de page.

Enregistrer pour le Web (Fichier> Enregistrer pour le web ou les appareils ).

Assurez - vous que l'image de type (type) est réglé sur GIF.

Assurez - vous que les paramètres sont identiques à ceux que l'image et cliquez sur Enregistrer.

Cliquez sur Enregistrer.

Eh bien, nous ne sommes pas tout couper, mais nous avons suffisamment de graphiques, ce qui commencerait. Rouler photoshop et ouvrez votre éditeur de texte favori pauvres.

Troisième partie: Pose de la première.

Créer deux nouveaux fichiers et nommez - les en conséquence interface.htm et stylesheet.css

Un dossier avec votre projet devrait ressembler.

Note: Ne pas oublier la différence dans les systèmes d'exploitation, vous pouvez avoir un complètement différentes icônes.

Remarque: La création d' une interface Web est pas processus très facile, je ne peux pas aller dans tous les détails, parce que c'est un livre entier, mais je vais essayer de vous parler des aspects les plus importants de html et css.

Copiez et collez le code suivant dans le fichier interface.htm.

Avant d'écrire le code CSS, pensez à la logique que vous allez utiliser. Il est préférable d'avoir une image à l'esprit avant de commencer, vous commencez avec une petite idée de quoi et comment il devrait ressembler, comme vous pouvez très facilement se faire dans une impasse.

Conseil utile: Lors de l' écriture CSS, il est préférable de commencer avec un cadre et ensuite aborder progressivement les tâches les plus difficiles dans l' élaboration des images. D'abord appliquée frontière faible, puis de plus en plus sont détaillées.

Copiez et collez ce code dans votre document html entre les balises <body> ... </ body> .

Copiez et collez le code suivant dans stylesheet.css