Cet Adobe Photoshop tutoriel va montrer et de discuter de la façon d'utiliser Photoshop de concevoir un site Web qui sera exporté comme html et de l'image en tranches. Ce qui peut ensuite être introduits dans une html éditeur de programme tel que Adobe Dreamweaver. Il s'agit d'un Adobe Photoshop web design tutoriel montre comment créer une page web directement dans Photoshop.
Abraham Chaffin CreativeCow.net, Cambria, California USA
Il existe de nombreuses manières différentes d'aborder la conception d'un site web. Certains choix de conception dans l'ensemble Dreamweaver, Ou de faire une rapide esquisse sur papier et ensuite construire leur site, Tandis que d'autres préfèrent une approche de conception graphique et l'utilisation Photoshop que les outils de conception. La création de votre site comme un Photoshop le fichier d'abord la création de votre site plus tard, beaucoup plus facile, pour diverses raisons.
Le début d'un concept de design est d'obtenir une bonne inspiration de quelque chose que vous pouvez déjà voir. Comme un peintre d'inspiration est le monde qui les entoure, Un concepteur de sites Web seront aussi s'inspirer de ce qu'ils voient. Parfois, c'est un site existant, Modèles de site, Ou à partir d'une image, Graphique, Ou d'un logo.
En plus d'une bonne inspiration est reconnaissant de votre public cible et la conception autour de ce qu'ils sont à l'aise avec. La présentation et le style doit être en conformité avec ce que certains de votre auditoire est déjà utilisé pour. La résolution de l'écran doit aussi être pris en considération lors de la conception d'un site Web. La largeur de la page et la première fois de votre page sont importants pour la réussite de votre site. (le pli est la zone de votre spectateur voit avant même d'avoir à faire défiler la page.) Tout en tenant compte que les résolutions d'écran plus large pourrait faciliter votre travail vous êtes en découpant une partie de votre auditoire. La majorité des internautes utilisent aujourd'hui les résolutions d'écran plus grande que jamais et dans l'avenir des sites Web conçus pour les petites résolutions d'écran deviendra de moins en moins d'un facteur, mais pour l'instant il doit encore être examiné.
Il est également possible pour votre site d'avoir une largeur flexible pour qu'il se dilate et se contracte sur la base d'un utilisateurs de la taille de la fenêtre, Cela est optimal lors de la tentative de créer un site qui va accueillir tout le monde. Un site conçu pour accueillir une taille de fenêtre d'au moins 750 pixels de large est optimale. La résolution minimale utilisée par la plupart des gens aujourd'hui est de 800 x 600.
Les étapes de la création de votre site Web à l'aide Photoshop sont:
1. Utiliser Photoshop de concevoir l'aspect et l'agencement du site vous souhaitent.
2. Tranche de l'image dans Photoshop, L'exportation des images en tranches ou en tant que html. Compréhension html formatage aide beaucoup pour l'interprétation de la façon de trancher votre image pour aller dans le html.
3. Créer les html pour correspondre au modèle Photoshop conception du site et de déposer les images en tranches ou de l'utilisation Dreamweaver pour régler le html fichier Photoshop créés à partir de votre PSD tranches.
La conception du site dans ce tutoriel sera construit à partir d'une image de Bessie dans son pâturage.
Ce devrait être un plaisir site = o
La création d'un en-tête graphique
La première partie de la conception d'un site Web en Photoshop est la création d'un en-tête graphique de votre site. L'en-tête graphique est la principale partie graphique de votre site qui sera considéré d'abord et sera le centre de l'ensemble de look and feel de votre site. Obtenir le fini header Graphique Ici.
étapes à suivre:
1. à droite, cliquez ici Pour enregistrer l'image. Enregistrer l'image dans un nouveau dossier.
2. Ouvrir le fichier téléchargé dans Photoshop.
3. Recadrer l'image à 745 x 320 avec le logo de la vache dans la partie droite de l'image. Pour ce faire sélectionnez l'outil de chapiteau rectangulaire (m), Puis sous la liste déroulante choisir le style de taille fixe. Mettre en 745 px de largeur et 320 pixels pour la hauteur. Position de votre chapiteau pour créer votre en-tête et de la culture de l'image (menu Image culture).
4. Créer une petite plume à 10 pixel du haut de l'image. Sélectionnez l'outil dégradé (g), Cliquez sur le dégradé dans la fenêtre de l'outil dégradé top, Définir le début et la fin des couleurs à blanc, Définir le début d'une opacité de 0% à la fin de l'opacité à 100%. Faire un nouveau calque et faites-le glisser et de créer l'aire de trafic à la page tenue de faire passer la rampe droite.
5. Alléger le graphique par la création d'une autre au cours de la rampe alors que l'image à partir de la base et la foudre vers le haut (maintenez shift pour garder la rampe droite). Le point de fin de la bretelle de sortie devrait être d'environ 300 pixels de l'image ci-dessus pour donner une belle brume pour le graphique. Ce qui donne l'apparence d'un meilleur jour dans la ferme de vache.
6. Enfin, nous allons alléger l'en-tête graphique encore plus loin en créant un autre rampe verticale dans la direction opposée que le précédent. Le point de départ devrait être encore avec le haut du logo de la vache et le fond devrait être de 1 pixel au dessus du fond du graphique.
7. Mettre l'en-tête graphique dans un dossier où vous allez créer votre site Web à l'aide pour mettre web (alt + shift + ctrl + s). Mettre en jpg, Optimisé, à environ 70 de qualité.
Votre en-tête graphique a été créé. Le graphique peut être utilisé de différentes façons dans un modèle de site. L'utiliser à sa pleine échelle et envelopper le corps du Textee et de navigation autour de lui, Ou de taille réduite et mis dans un modèle plus moderne, la mise en page.
La conception d'un site dans la mise en page Photoshop
La conception de votre site Web doit disposer d'au moins trois parties distinctes qui comprennent des éléments spécifiques:
1. Header
Logo de la société
Bannière graphique
Liens / boutons pour la maison, à propos de, Et la page de contact
2. Corps
Secteur de contenu pour le Textee sur la page
Des images ou des graphiques incorporés avec le contenu
3. Footer
Informations de copyright
Des liens vers des politiques et modalités d'utilisation, Et retour au haut de la page de lien
Lors de la création du schéma de configuration en Photoshop assurez-vous de laisser de la place pour plus de la navigation, Texte, Site et l'expansion dans l'avenir, ou vous pourriez vous retrouver devant la refonte complète de votre site car vous n'avez pas laisser la place à des liens vers des pages dans votre conception. Les étapes suivantes sont utilisées pour créer la présentation de la Photoshop site web mise en page qui peut être Télécharger ici.
étapes à suivre:
1. Créer un nouveau PSD fichier de 745 px x 600 px et de l'enregistrer en tant que mise en page.psd
2. Place l'en-tête graphique dans le document. (ouvrir le fichier d'en-tête (g_header.Jpg), Sélectionnez-le (Ctrl + A), Copie (ctrl + c), Activer la mise en page.PSD fenêtre, Coller (Ctrl + V).)
3. Utiliser l'outil Déplacement (v) pour déplacer la tête vers le haut de la structure holding changement brusque de la laisser en place au sommet.
4. Ouvrir le Logo de la société, Copiez et collez le dans votre mise en page.
5. Transformer le logo (ctrl + t) et déplacez-le dans le coin supérieur gauche de l'aménagement du site.
6. En utilisant les outils de type horizontal (t) Créer un petit Textee dans le ciel, les liens entre les deux logos en haut de la guide. Tapez le mot "home", 4 places, "contact", Un autre de 4 espaces, Puis "à propos". Texte devrait être d'environ 12 pt, Arial, En utilisant la couleur # a6ff94 pour une fête de lumière de couleur verte.
7. Donner au Textee une dropshadow (calque style de calque dropshadow) avec une distance de 2 et une taille de 3.
8. Position du Textee en utilisant l'outil Déplacer et les touches fléchées de façon appropriée à la prochaine logo en haut à gauche.
9. Below the smaller COW logo we'll create some larger navigation / image links:
En utilisant les outils de type horizontal (t) de type "home page 1 page 2 page 3 page 4" en utilisant arial, 17 pt font avec du Textee noir. Mettre environ 4 ou 5 espaces entre les mots pour donner les boutons de l'espace.
Créer un nouveau calque
Et glissez-le ci-dessous le Textee que vous venez de créer
Avec l'outil de chapiteau rectangulaire (m), sélectionnez un secteur situé un peu plus large autour de la navigation.
Sélectionnez l'outil seau de peinture (g) et remplir la zone sélectionnée de la nouvelle couche de vide (# a6ff94) la couleur verte.
Faire de cette couche d'air d'un bouton en allant à la couche de menu style de calque biseautage et estampage. Utiliser les paramètres par défaut en appuyant sur la touche ok
Une colonne en utilisant votre outil de supprimer chapiteau d'une colonne de pixels entre chaque mot dans le calque d'arrière-plan vert que vous venez de créer. Ce sera la rupture de biseau et de faire en sorte que chaque mot ressemble à un bouton. Mai-vous besoin pour effectuer un zoom avant pour obtenir droit dans les mots.
8. En double couche sur le bouton vert en le faisant glisser sur la nouvelle couche de bouton Ou aller à la couche de menu en double couche.
9. Sélectionner le bouton vert en bas et d'ajouter une couche de flou à la couche avec une distance d'environ 150 pixels en allant dans le menu Filtre Flou Motion flou.
10. Déplacer le flou sur la couche de 10 pixels et une baisse de l'opacité à 20%. Ce qui donne un subtil dans votre ligne de boutons à l'aide de diviser le début du contenu.
12. Créer un nouveau calque derrière le droit d'auteur du Textee qui deviendra le fond derrière le pied de page, Assurez-vous que le calque est sélectionné.
13. Utiliser l'outil de chapiteau rectangulaire (m) pour sélectionner une zone au bas de la page, mais juste un peu plus élevé que le droit d'auteur du Textee.
14. Utiliser le seau de peinture outil (g) et remplissez la zone avec le vert vif (# a6ff94).
15. Plume du bord extérieur en utilisant la couche intérieure lueur style (menu calque style de calque lueur intérieure), a fixé le mode de mélange à la normale, Couleur blanc (# ffffff) et la taille de 10 pixels.
Nous avons conçu un simple, Rigolo, Site web en Photoshop avec un en-tête et pied de page. L'espace blanc entre la tête et le pied de page seront tous les Textees et les images qui vont remplir le site.
Tranchage en images Photoshop pour le web
Maintenant que nous avons conçu un site simple avec Photoshop nous découper en morceaux et d'exporter les morceaux comme un html fichier qui peut être utilisé et modifié plus tard en Dreamweaver. Lors de la coupe de votre site web design se rappeler que chaque tranche deviendra une cellule d'un tableau et l'image alors essayez de garder les tranches aussi peu et aussi simple que possible. Et assurez-vous de début et de fin de votre tranches en dehors de la conception dans la mesure du possible, afin Photoshop ne confondez pas un seul pixel vous avez peut-être pas comme une tranche. Ouvrir la conception du site, nous avons fait plus tôt, Sélectionnez l'outil de coupe (k) et laissez-y. (tourner le magnétisme pour de meilleurs résultats - voir menu snap (ctrl + shift +;), Assurez-vous facile à couches est en marche.) Télécharger la Tranchés PSD fichier ici.
étapes à suivre:
Créer une tranche autour de l'ensemble graphique. Commencer à l'extérieur du graphique et de la fin à l'extérieur de la graphique. Cela aidera à raconter Photoshop à ne pas créer des graphiques pixel unique quelque part que nous ne voulons pas.
Tranche le pied de page graphique de début et de fin dans le gris à l'extérieur de la mise en page. Laisser le magnétisme de trouver le haut de la couche pour vous.
Tranche la tête de tout le chemin en haut à partir du graphique ci-dessus dans le gris et se terminant juste en dessous de la plus grande de navigation. Ce qui devrait trancher la vache en deux (oh non! ). Vous devriez avoir maintenant 3 tranches de votre tête portion, Le contenu de votre site, Et votre pied de page.
Tranche sur tous les boutons, Essayez de vous assurer que vous claquer à la même position pour chaque bouton pour que la hauteur des touches sont les mêmes. Pour le bas, Plus grands boutons, vous pouvez snap au bas de la tranche environs.
Ton Photoshop conception de sites Web devraient être tranchés et maintenant prêt à mettre sur le web.
D'exportation / d'épargne Photoshop tranches d'une page Web
Dans les versions antérieures de Photoshop la sauvegarde d'une image en tranches pour le web ne peut être fait avec ImageReady, mais il est maintenant intégré dans tous les Adobe Photoshop CS3. La partie suivante de ce tutoriel va vous montrer comment mettre les tranches de la conception de sites Web, nous avons fait en Photoshop comme un html fichier avec des images.
étapes à suivre:
Avec les tranches de votre fichier graphique ouvert choisir menu enregistrer pour le web et les dispositifs (alt + shift + ctrl + s). Ce qui porte le mettre sur le Web et les dispositifs fenêtre.
Dans le cadre de la preset déroulant choisissez jpeg élevé pour la qualité et le type de fichier. (ce qui est tout simplement une préférence.)
Cliquez sur la flèche du menu optimisé pour ouvrir le sous-menu et cliquez sur Modifier les paramètres de sortie...
Nous ne rentrerons pas dans les détails sur les paramètres de sortie ici. Choisissez les paramètres par défaut des paramètres de la liste déroulante. L'utilisation précédente et suivante pour examiner tous les paramètres.
Cliquez sur OK, puis enregistrez. Assurez-vous que vous enregistrez dans un endroit, vous pouvez facilement localiser.
Mettre de choisir le type: html et des images (*.html )
Paramètres: Paramètres par défaut
Tranches: Toutes les tranches
Cliquez sur Enregistrer
Félicitations que vous avez maintenant réussi à concevoir un site web avec Photoshop, Il tranché, Puis exportés avec succès en tant que html fichier! Il ya quelques modifications à faire toutefois avant la conception peuvent être utilisées comme une page web ou un site Web modèle, mais je vais laisser cela pour un autre tutoriel.
Maintenant que nous avons conçu un site simple avec Photoshop nous découper en morceaux et d'exporter les morceaux comme un html fichier qui peut être utilisé et modifié plus tard en Dreamweaver. Lors de la coupe de votre site web design se rappeler que chaque tranche deviendra une cellule d'un tableau et l'image alors essayez de garder les tranches aussi peu et aussi simple que possible. Et assurez-vous de début et de fin de votre tranches en dehors de la conception dans la mesure du possible, afin Photoshop ne confondez pas un seul pixel vous avez peut-être pas comme une tranche. Ouvrir la conception du site, nous avons fait plus tôt, Sélectionnez l'outil de coupe (k) et laissez-y. (tourner le magnétisme pour de meilleurs résultats - voir menu snap (ctrl + shift +;), Assurez-vous facile à couches est en marche.) Télécharger la Tranchés PSD fichier ici.
Créer un petit Textee dans le ciel, les liens entre les deux logos en haut de la guide. Tapez le mot "home", 4 places, "contact", Un autre de 4 espaces, Puis "à propos". Texte devrait être d'environ 12 pt, Arial, En utilisant la couleur # a6ff94 pour une fête de lumière de couleur verte.
Et glissez-le ci-dessous le Textee que vous venez de créer
