Du .psd au HTML et CSS actifs
Je ne suis pas vraiment un designer. Ma force réside dans le codage. Cela dit, je suis souvent obligé de jouer le rôle de "L'homme", responsable de tous les aspects de la création de sites. Donc, cela dit je me demande si les pros peuvent me donner des astuces/solutions/liens vers des tutoriels à mes questions principales.
Résolution. Que devrais-je viser? Quels sont les bords inférieur et supérieur que je devrais connaître? Je sais que des systèmes tels que 960 Grid étaient populaires récemment. Est-ce le nombre que je devrais quand même viser?
Découper un fichier .psd - y a-t-il des astuces que je devrais connaître? J'ai toujours trouvé difficile d'obtenir des tranches de pixels parfaites. Je suis aussi vraiment lent. Je dois mal regarder les choses ou rater quelque chose de fondamental. La même chose vaut pour le texte. Les mises en page sont toujours remplies du classique "Lorem ...", mais je n'arrive jamais à obtenir un contenu réel qui s'adapte aussi bien à l'écran.
Les objets à la recherche avancée (en tout cas, pour moi), comme une partie d'un logo/image superposant ce qui ressemble à une zone de contenu. Comment on fait ça?
Comment les mises en page changent-elles/sont-elles informées par la décision d’être fixes ou liquides?
Encore une fois, tous les conseils/astuces/suggestions/tutoriels que vous pouvez partager seraient grandement appréciés.
Mon expérience avec la découpe d'un modèle dans Photoshop a toujours été fastidieuse et lente. Quelle version de Photoshop utilisez-vous?
En général, je choisis de ne pas utiliser de tranches, mais simplement d'utiliser l'outil Rectangle de sélection (Rectangle, etc.), de copier/coller dans une nouvelle image et de l'enregistrer. Ensuite, utilisez HTML/CSS pour l'aligner correctement.
- Supposons que vous affichez des actualités et des mises à jour dans une zone de contenu et que vous souhaitez que l'image affichée dans l'en-tête ressemble à une zone menant vers le bas. Créez l’image complète de la zone d’en-tête avec la zone de contenu, puis découpez-la afin qu’elle corresponde à l’image d’arrière-plan de l’en-tête. Prenez l’autre partie et faites-en l’image d’arrière-plan de la zone de contenu. Cependant, il existe quelques astuces pour l'aligner correctement, telles que CSS.
Ce n'est pas forcément une méthode secrète, mais plutôt des créations créatives avec des outils simples utilisés dans tous les sites Web. Si vous avez besoin de plus d'un exemple, je peux vous en donner un.
- Tout dépend du contenu de votre site Web. Si vous voulez un site Web vraiment à jour qui inclut beaucoup de contenu changeant, vous voulez aller avec dynamique (ce que je pense que vous entendiez par liquide), auquel cas vous voudrez utiliser PHP ou quelques-uns CMS, ou si vous ne donnez que du contenu qui ne changera pas tant que ça, vous pouvez choisir statique (fixe).
Maintenant, d'autres ici ont peut-être de meilleures idées, mais les méthodes ci-dessus sont ce que j'ai vu fonctionner.
Il peut être difficile de répondre à cette question car vous avez des questions assez détaillées. Si je pouvais donner une réponse, je dirais que vous devriez aller sur w3schools.com et apprendre tout le balisage HTML et CSS que vous pouvez. De là, vous abordez la conception Web à partir d’une attitude strictement CSS et HTML. Utilisez des images pour ajouter des améliorations.
À vrai dire, vous pouvez faire beaucoup avec CSS pour rendre un site plus joli. Et puisque votre force repose sur vous, le balisage doit être simple pour vous.
960px, (avec ou sans système de grille) oui, est un bon ajustement. La majorité des écrans sont supérieurs à 1024 ou 1024 (large. En fait, 960 est dû aux barres de défilement, etc.), 800x600 est devenu de moins en moins utilisé (très faible% selon mes statistiques ...), bien que de plus petites résolutions soient être un peu plus courant pour les mobiles et les ordinateurs de poche, mais il est préférable d’alterner pages/systèmes pour ces appareils, plutôt que de sacrifier autant le design, IMHO. Certaines personnes conçoivent à 770px, ou quelque chose comme ça. Nous parlons ici de pages à largeur fixe, généralement centrées. Mais selon le type de site, vous pouvez également faire des présentations liquides. Les forums phpBB en sont un bon exemple.
utilisez des "tranches". Vous les créez avec l'outil "tranche", est une icône "coupe". Assurez-vous simplement que "Snap" est activé, dans le menu "Affichage", et que la capture sur les tranches est activée. De plus, l'accrochage aux limites du document est activé. Aligner sur la couche devient souvent plus un problème si ON est activé, selon mon expérience ... Vous dessinez simplement des tranches et enregistrez le psd afin qu'elles soient toujours présentes. Si vous avez besoin de changer un peu la disposition, changez-les également, utilisez le zoom pour ajuster au pixel. Zoom avant, vous pouvez ajuster les marges de la tranche en cliquant partout sur la marge. Donc, si vous exportez souvent avec des modifications, cela devient de plus en plus utile.
Je ne comprends pas celui-ci.
Ils ne sont pas "informés" ... Vous décidez simplement ce que ça va être. Si le contenu est liquide, vous pouvez faire une abstraction, définir la taille de la zone dynamique, comme vous le ferez avec du code. Utilisez simplement une largeur habituelle pour créer une idée visuelle pendant que vous travaillez. Et utilisez à nouveau les secteurs en utilisant une largeur fixe pour les éléments fixes (icônes, etc.)
Astuces ... Utilisez Photoshop "Actions" quand cela a du sens. Donc, vous allez automatiser certaines choses. Travaillez sur le psd uniquement pour les premières ébauches, au stade de la prise de tête. Code une fois que la conception visuelle est généralement acceptée.
Autre conseil: n'utilisez pas le code d'exportation Web de PS. Faites simplement la largeur de vos éléments selon vos besoins, puis mettez ces largeurs et ces hauteurs dans votre page de classes css.
Edit: 3. Je pense que vous voulez dire définir une div avec une largeur et une hauteur de la zone de contenu exacte, une tranche de l’image d’en-tête entière, où se trouve votre logo. Donnez à la div un arrière-plan (en lui attribuant une classe CSS avec cette largeur et cette hauteur, et une image d’arrière-plan) avec cette partie découpée exacte. Vous pouvez redéfinir en css la balise <a></a> à l'intérieur de cette div, en la configurant comme suit: block, ayant la largeur et la hauteur exactes de la "zone active", généralement le logo, pour créer un lien vers home.html, par exemple .
Affichez - mais ne copiez pas directement - les fichiers CSS/HTML/etc de vos sites Web 2.0 préférés à la mode. Lors de l’apprentissage, il est préférable d’examiner la documentation et les références de classe au programme plutôt que de les copier. Bonne chance :)