20 Replies Latest reply on Sep 16, 2017 12:35 AM by AndresBrA

    Bug photoshop <!DOCTYPE html>

    arthurw57096354

      Bonjour, je souhaite faire un site à l'aide de photoshop. Pour cela j'utilise l'option "Enregistrer pour le web" et quand je l'enregistre il ne génère pas <!DOCTYPE html> à la première ligne alors que c'est obligatoire dans le html. Quand je le rajoute manuellement à la première ligne, les images de mon site deviennent toute bugé comme

      vous pouvez le voir sur l'image.

       

       

      Capture.PNG

       

      Voici le code: (Sans le <DOCTYPE html> que j'ai rajouter)

       

       

      Merci d'avance.

        • 1. Re: Bug photoshop <!DOCTYPE html>
          CIA_design Adobe Community Professional

          Bonjour, alors en ce qui concerne Photoshop il permet de produire du contenu pour le web, donc être intégrer déjà dans une page préparée.

           

          Enregistrer pour Web signifie enregistrer au format lisible par les navigateur (pour résumé)

           

          Pour créer des sites il y a Muse, Dreamweaver chez Adobe ou alors Indesign avec l'excellent plug In IN5 de Ajar Production.

           

          Photoshop permet de faire du Webdesign, de générer le css mais pas de produire une page web.

          1 person found this helpful
          • 2. Re: Bug photoshop <!DOCTYPE html>
            AndresBrA Adobe Community Professional

            Tu as tout-fait raison même si on peut enregistrer au format "images + html" avec Photohop . Dans un passé lointain sans Muse, ni Dreamweaver, j'ai aussi utilisé très très brièvement cette possibilité (encore moins à conseiller que faire des affiches avec Photoshop et non avec  InDesign).

            Mais comme le dit Arthur, Photoshop n'ajoute pas  <!DOCTYPE html> à la première ligne du doc html créé.

            Cependant, j'ai fait un test rapide avec une image et le résultat est identique avant ou après avoir ajouté le Doctype à la main.

            Quel Photoshop?, quelles images? OS? Carte graphique?

            1 person found this helpful
            • 3. Re: Bug photoshop <!DOCTYPE html>
              arthurw57096354 Level 1

              Bonjour, j'utilise Photoshop CS6, le images sont celle que j'ai découpé dans Photoshop à l'aide de l'outils tranche. J'utilise Windows 10 et ma carte graphique et une GTX 1050.

              • 4. Re: Bug photoshop <!DOCTYPE html>
                AndresBrA Adobe Community Professional

                Bonsoir Arthur,

                Windows 10, J'ai testé aussi bien sur CS6 (CG GTX 950M) que sur CC2017 (CG GTX  680) avec Edge et chrome) sans rencontrer le moindre problème.OK  donc en principe, il ne devrait pas y avoir de problème.

                 

                A part les sempiternelles manipulations possibles (reset des prefs de photoshop, (ré)installation du driver de la carte graphique et désinstallation complète de Photoshop et sa réinstallation), avec quel navigateur ouvres tu ta page html? en as-tu testé un autre? si oui, as-tu le même problème avec les autres, navigateurs? si oui, essaye le reset de Photoshop et la réinstallation du driver de ta carte graphique (vérifie si tu n'en as pas une 2ème sur le chipset et désactive-là pour voir).

                 

                Si le problème existe toujours, avant une éventuelle réinstallation de Photoshop , Je peux tester sur mes PC si tu m'envois les fichiers.

                • 5. Re: Bug photoshop <!DOCTYPE html>
                  CIA_design Adobe Community Professional

                  Pour moi c'est une méthode assez obsolète et chronophage, par rapport aux possibilités offertes avec les dernières versions mais on a les outils que l'on à

                  Sinon il faut nommer chaque tranche avec nom explicite et vérifier les dimensions ensuite enregistrer pour le Web et ensuite choisir :

                  Format : Images

                  Paramètres : personnalisés

                  Tranches : toutes les tranches utilisateur

                   

                  Ensuite il faut intégrer le tout dans le(les) fichier(s) Html et CSS

                  1 person found this helpful
                  • 6. Re: Bug photoshop <!DOCTYPE html>
                    AndresBrA Adobe Community Professional

                    Je suis d'accord avec toi sur "l'obsolète" qui devrait déjà inciter à ne l'utiliser qu'à titre d’apprentissage éventuel.

                     

                    Pour le chronophage, je suis plus nuancé.

                     

                    C'est comme Photoshop ou illustrator vs InDesign pour certaines utilisations.  Si on ne possède pas l'outil ad hoc, "Faute de grives, on mange des merles" et pour un travail ponctuel, on peut éventuellement gagner plus de temps en utilisant "one shot" un outil qu'on maîtrise bien plutôt que de devoir d'abord maîtriser un autre outil et ensuite réaliser son projet. Tout dépend de la rapidité d’apprentissage de chacun.

                    Lorsqu'on me pose la question sur "quel est le meilleur logiciel " , j'ai l'habitude de répondre, celui que vous connaissez le mieux...tant qu'il ne vous bloque pas dans la réalisation de votre projet.

                     

                    Ce qui ne veut pas dire qu'on obtiendra toujours le meilleur résultat avec l'outil le moins adapté .

                    • 7. Re: Bug photoshop <!DOCTYPE html>
                      PECourtejoie Adobe Community Professional

                      Bonjour!

                      Je me demande quel sera le rendu et le poids de la page sur un smartphone... (plus de 50% de constulation des pages le sont sur mobile)

                      Je conseillerais aussi un créateur de page HTML dédié.

                      • 8. Re: Bug photoshop <!DOCTYPE html>
                        arthurw57096354 Level 1

                        Bonjour, j'ai essayer de réinstallé Photoshop, j'ai essayé une autre version de Photoshop, j'ai mis a jour ma carte graphique, j'ai aussi essayé sur un autre PC et toujours le même problème. Quand je rajoute le <DOCTYPE html> l'affichage des boutons que j'ai découpé avec l'outil tranche bug. j'ai essayer d'ouvrir avec Chrome et Edge.

                        • 9. Re: Bug photoshop <!DOCTYPE html>
                          AndresBrA Adobe Community Professional

                          Pierre-Etienne,

                          Toi et Alexandre, vous avez tout-à-fait raison mais à mon avis rien ne sert de direqu'une voiture électrique c'est mieux a celui qui a une panne sur une voiture à explosion et qui demande comment la réparer,  Je pars donc toujours du principe que celui qui veut utiliser un logiciel à ses raisons et je m'efforce dans un premier temps à me limiter a répondre à sa question quitte à revenir sur les autres logiciels plus adaptés ensuite.

                          A voir la réponse d'Arthur, je pense qu'il aimerait quand même savoir ce qui se passe. Par contre, je vais suivre ton exemple en ce qui concerne les infos pour bien être certain de comprendre.

                          • 10. Re: Bug photoshop <!DOCTYPE html>
                            AndresBrA Adobe Community Professional

                            Arthur,

                            comme avec mes fichiers, je ne vois pas de différence avec ou sans Doctype et que ce soit sur CS6 ou CC2017,

                            peux-tu poster deux copies d'écran l'une du résultat sans Doctype et une après avoir ajouté le Doctype. Ceci pour bien voir les différences entre les deux.

                             

                            D’autre part, je ne pense pas pouvoir t'aider plus mais comme je te l'ai proposé, je veux bien faire l'essai sur mes deux machines avec tes fichiers  (y compris le psd) pour voir pour voir si le problème est bien dû à tes fichiers.

                            • 11. Re: Bug photoshop <!DOCTYPE html>
                              arthurw57096354 Level 1

                              Voila une capture sans le doctype:

                              Capture2.PNG

                               

                              Et voilà une capture en le rajoutant:

                              Capture.PNG

                               

                              Je viens de faire le test en créant un autre fichier vite fait et j'ai aussi le même bug, dés que je rajoute le doctype dans un fichier ou j'ai découper des images avec l'outil tranche de Photoshop, j'ai ce bug. Ce qui veux dire que ça ne vient pas de mon fichier :/

                              • 12. Re: Bug photoshop <!DOCTYPE html>
                                AndresBrA Adobe Community Professional

                                Je te réponds dans un instant. Je viens de refaire une copie rapide d'après  ton image, j'ai fait les tranches. Le temps de faire les comparaisons et je te dis ce que j'obtiens. Wait and...

                                • 13. Re: Bug photoshop <!DOCTYPE html>
                                  AndresBrA Adobe Community Professional

                                  i sans Doctype

                                  et avec Doctype

                                   

                                  Comme tu vois dans les deux cas c'est pratiquement la m^me chose. Il y a juste une petite différence sur les lignes blanches! Donc à voir ce que tes fichiers donneraient chez moi et comparer la manière de faire les tranches!

                                  • 14. Re: Bug photoshop <!DOCTYPE html>
                                    arthurw57096354 Level 1

                                    Voila le lien de mon fichier pour essayer: Dropbox - accueil cor.psd

                                    • 15. Re: Bug photoshop <!DOCTYPE html>
                                      AndresBrA Adobe Community Professional

                                      Bonjour Arthur,

                                      J'ai regardé ton fichier dont la découpe est soignée. J'ai fusionné tous les calques et j'ai fait le test.

                                      Pas de problème sans  Doctype et exactement le même résultat que le tien avec Doctype (en fait les lignes blanches que j'ai ajoutées dans mon fichier étaient déjà un artefact de ton résultat avec Doctype) et effectivement les lignes droites sont déformées. Ces déformations et lignes blanches correspondent à des décalages des images qui apparaissent lors de l'ajout du DOCTYPE. C'est la même chose quel que soit le navigateur.

                                      On peut lire dans l'aide:

                                      "Dès CC2015, Adobe n’ajoutera plus de nouvelles fonctionnalités à l’option Enregistrer pour le Web, c’est pourquoi celle-ci est à présent marquée comme « Héritée »". C'est-à-dire que cette fonction n'est plus mise à jour en fonction de l'évolution du Web et n'est donc plus adaptée. Il est certain que le code html fourni par Photoshop contient des erreurs et/ou obsolescences et que celles-ci augmentent dès qu'on ajoute le Doctype et aboutissent au décalage des images.

                                       

                                      Tu peux tester ton Html sur le web Ready to check - Nu Html Checker .

                                       

                                      En fait, tu arrives dans le cas de figure "le logiciel te bloque dans l'avancement de ton projet car il ne convient plus pour cette utilisation"

                                       

                                      Il y a deux solutions, soit tu tiens quand même à utiliser Photoshop pour ton projet (et cette fois, je te le déconseille également car c'est très hasardeux d'utiliser un logiciel qui n'évolue plus même si c'est celui dont on est le superchampion ), soit tu suis les bons conseils de PECourtejoie et CIA_design .

                                       

                                      Dans le premier cas, il faudrait chercher sur le web un forum html5 quelqu'un qui pourrait corriger rapidement ton code, ou te plonger dans l’apprentissage du HTML 5.

                                      https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3 par ex.

                                       

                                      La deuxième solution te permettra d'utiliser (apprendre) un outil moderne et adapté au web mobile également mais il vaut toujours mieux avoir quelques notions du code.

                                       

                                      Si tu ne souhaires pas passer du temps dans l’apprentissage du HTML et des CSS, à part Muse, il y a d'autres solutions plus ou moins gratuites. A toi de voir, où tu veux investir temps et/ou budget.

                                      • 16. Re: Bug photoshop <!DOCTYPE html>
                                        vinny38 Level 4

                                        Salut

                                        Remplace ta déclaration HTML5 en déclaration XHTML Transitionnel:

                                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                                        

                                         

                                        Cette norme est plus souple et gérera bien mieux un site structuré en tableau.

                                         

                                        Je conseille également de rajouter une CSS reset, ce qui permet de régler moults problèmes d'affichage. Tu peux en trouver ici par exemple : https://www.alsacreations.com/astuce/lire/36-reset-css.html

                                        1 person found this helpful
                                        • 17. Re: Bug photoshop <!DOCTYPE html>
                                          AndresBrA Adobe Community Professional

                                          Merci Vinny,

                                          J'avais vu le Doctype Public, mais comme tu le sais déjà ma connaissance du HTML est très limitée. J'espère que ta proposition fera le bonheur d'Arthur, s'il n'a pas ou ne veut pas d'autre solution.

                                          • 18. Re: Bug photoshop <!DOCTYPE html>
                                            arthurw57096354 Level 1

                                            Bonsoir, Je vous remercie tous de m'avoir aider, la ligne de vinny38 à résolu mon problème!

                                            • 19. Re: Bug photoshop <!DOCTYPE html>
                                              vinny38 Level 4

                                              Eh bien je suis content que tu aies réglé ton problème immédiat.

                                              Néanmoins je t'invite à bien lire les commentaires fort judicieux des autres membres si tu veux aller plus loin dans la création de sites... créer une page avec photoshop comme tu l'as fait est un début (j'ai commencé par là  aussi ^^) mais n'est pas vraiment une solution pérenne.

                                              Pour reprendre la métaphore automobile d'Andres, maintenant que ta voiture est dépannée, pourquoi ne pas commencer à envisager de la changer pour une plus performante. ..

                                              Apprendre les bases de html5 et CSS. .. ce n'est pas très compliqué et très intéressant.

                                              A +

                                              • 20. Re: Bug photoshop <!DOCTYPE html>
                                                AndresBrA Adobe Community Professional

                                                Arthur,

                                                Nous sommes heureux d'avoir pu t'apporter de l'aide et heureusement  vinny38 t'adonné la bonne solution immédiate .

                                                Je t'encourage à ouvrir ton horizon en suivant ses conseils qui résument bien la situation. J'ai aussi commencé par Photoshop et si je n'ai pas accroché à l’apprentissage du HTML et des CSS (c'est aussi vrai pour d'autres langages et scripts), c'est uniquement à cause de mes faibles capacités cognitives . Il me reste cependant quelques souvenirs qui m'aident encore de temps en temps.