Passer d'une maquette Photoshop à un template Wordpress, C'est possible mais quelle est la meilleure solution ?

[gilloo35]

Il existe par exemple SiteGrinder qui permettrait ce genre de prestation, mais je n'ai pas eu l'occasion de tester. A votre connaissance, ou d'après votre expérience, quelle serait la meilleure solution pour quelqu'un qui bricole le code mais qui n'est pas un expert... ?

Merci

Ce message a été modifié par gilloo35 - 15 Dec 2014, 13:33.

[Ducace]

La maquette reste une maquette. Qu'elle soit faite en Photoshop ou sur papier avec des markers.
Ensuite, il faut transposer en images et CSS.

C'est la partie compliquée et je ne connais pas de solution simple.

Perso, je ne fais pas mes maquettes dans Photoshop parce que ça ne fait rien avancer.
Je fais une maquette directement en html (DW ou Freeway). Ainsi on peut voir aussi la dynamique des liens, animations, etc.
Et ensuite je transfère les informations (dimensions de blocs), les images, les CSS sur le CMS.

[gilloo35]

Je travaille habituellement avec un développeur maîtrisant parfaitement Wordpress. Je pense (à tort ?) qu'il utilise une plateforme de conversion car je m'étonne à chaque fois de la rapidité phénoménale avec laquelle il me proposer un template (préliminaire) uniquement à partir de mes PSD. Les solutions que j'ai trouvées ne sont proposées que sous environnement Windows... au pire, j'ai envie d'en tester une sous VMWare...

Quelqu'un aurait un autre avis sur la question ?

[Ducace]

... car je m'étonne à chaque fois de la rapidité phénoménale avec laquelle il me proposer un template (préliminaire) uniquement à partir de mes PSD...

S'il connaît Wordpress, peut être découpe-t-il tout simplement ton psd en tranches correspondant à son template.
Ce n'est jamais qu'une question de pixels.

[gilloo35]

Du tout... ce qu'il me fournit en version béta est un Wordpress complètement fonctionnel

[Ducace]

Du tout... ce qu'il me fournit en version béta est un Wordpress complètement fonctionnel

Je ne dis pas le contraire. Il faut bien qu'il passe de ton Photoshop au Wordpress dont la sortie est en html.
Enfin, ne voyant pas ta maquette, il est difficile de donner un avis.

Si c'est de l'image (logos, bandeaux, fond...) il découpe, refait, transforme pour les mettre à dimension.
Et/ou il adapte le layout Wordpress en jouant sur les tailles des blocs.

Si c'est principalement du texte, c'est surtout dans la CSS qu'il faut paramétrer.

J'ai du mal à m'imaginer un logiciel qui ferait ça automatiquement.

[magicPDF]

Je travaille habituellement avec un développeur maîtrisant parfaitement Wordpress. Je pense (à tort ?) qu'il utilise une plateforme de conversion car je m'étonne à chaque fois de la rapidité phénoménale avec laquelle il me proposer un template (préliminaire) uniquement à partir de mes PSD. Les solutions que j'ai trouvées ne sont proposées que sous environnement Windows... au pire, j'ai envie d'en tester une sous VMWare...
Quelqu'un aurait un autre avis sur la question ?

Photoshop : menu du panneau Calques : Copier CSS.

[gilloo35]

Tu pourrais être plus explicite ?

[Sgt.Pepper]

Bon, allez, c'est ma semaine de bonté...

Vas faire un tour ici

[gilloo35]

J'ai cliqué sur create wordpress theme... ça sent le site à 2 sous, pas tenu à jour, que tout le monde fuit à reculon...

http://wordpress.psd2cssonline.com/

[Cri-cri]

Tu pourrais être plus explicite ?

http://helpx.adobe.com/fr/photoshop/using/...pe-or-text.html

[Sgt.Pepper]

J'ai cliqué sur create wordpress theme... ça sent le site à 2 sous, pas tenu à jour, que tout le monde fuit à reculon...

http://wordpress.psd2cssonline.com/

Ben c'est zoli, ça ! Non ?

[Lilac Wine]

Un intégrateur web un peu doué, qui de plus maîtrise parfaitement WordPress, aura plus vite fait à la mano, non ?

Ce message a été modifié par Lilac Wine - 22 Dec 2014, 09:48.

[Ducace]

C'est assez marrant, cette nouvelle fonctionnalité de Photoshop. La copie de CSS.
A condition de créer dans Photoshop avec l'esprit web, évidemment.

Tenant compte quand même qu'un site web, ce n'est pas seulement de la CSS.
Ensuite, que fait-on des nouvelles fonctionnalités CSS3?
On peut toujours les ajouter, me direz-vous.

Perso, je ne voyais pas Photoshop comme un concepteur de site web, mais apparemment, c'est la tendance dans les studios web.
Après la photo, la retouche et l'illustration, j'ai vu des étudiants dans un école graphique faire des dépliants publicitaires de supermarchés (vous voyez ce que je veux dire?) dans Photoshop. Même en packaging, un imprimeur m'a demandé ma maquette Photoshop. Alors, pourquoi pas des sites web?

[gilloo35]

Cri-cri : J'ai regardé (vite fait) ça ressemble à ce que proposait Fireworks à l'époque, non ? !Fireworks, qui lui-même avait pour origine le bon vieux Image-Ready). Mais à première vue, je me demande si ça fait ce que je recherche à faire en automatique...

Sgt.Pepper : déjà qu'avec ma paire de lunettes à verres progressifs, j'ai du mal à m'y faire, là c'est la totale. Je ne savais même plus sous quel angle regarder mon écran.

Lilac Wine : Entièrement d'accord, mais en ces temps troublés où la rigueur est... justement... de rigueur , je me disais que ce serait pas mal si je pouvais éonomiser sur le budget "développeur", surtout quand ce genre de choses semble faisable en bidouillant un minimum.

Ducace : Ça fait très très longtemps que je fais des sites statiques/vitrines avec Photoshop. C'est hyper pratique, d'autant que le rendu en html est fidèle au pixel près. Si je passe ma semaine avec Photoshop, c'est effectivement parce qu'il permet de bosser dans des domaines très différents et très spécifiques

Ce message a été modifié par gilloo35 - 22 Dec 2014, 12:56.

[Ducace]

Cri-cri : J'ai regardé (vite fait) ça ressemble à ce que proposait Fireworks à l'époque, non ? !Fireworks, qui lui-même avait pour origine le bon vieux Image-Ready). Mais à première vue, je me demande si ça fait ce que je recherche à faire en automatique...

Si ma mémoire est bonne, Image Ready était un développement web de Photoshop mais orienté pixel.
Fireworks, lui, provenait de la planète Macromedia (avec Freehand, Flash, etc.)
Donc pas de filiation directe.
Evidemment, après le rachat de Macromedia par Adobe, quelques logiciels sont passés à la trappe comme Freehand dont pas mal de caractéristiques ont été intégrées à Indesign.

Cela dit, le métier de graphiste n'a cessé d'évoluer depuis l'apparition du Mac. Avec l'intégration d'un tas de métiers spécifiques (typographe, maquettiste, photograveur, retoucheur, etc. etc. etc.)
Logique donc que cela ne s'arrête pas là.

Je faisais le point, la semaine dernière sur les travaux que j'ai réalisé en 2014.
Alors qu'à l'origine, je suis AD dans la pub, donc orienté principalement vers le print, voici les pourcentages de réalisation dans mon chiffre d'affaires:
- Print: 5% (IND, ILL, Acrobat)
- Web: 16% (HTML, PHP)
- Photo: 16% (prise de vue et Photoshop)
- Vidéo: 63% (prise de vue et FCP)

Etonnant, non?
Pour info,
il y a 20 ans, print, c'était 100%;
il y a deux ans, vidéo, c'était 0%.

Quand je disais que le monde change!

[Sgt.Pepper]

Mouais... bon... les pages WEB avec Photoshop, c'est vraiment pour les sites d'avant HTML5 et CSS3. Et encore, perso, je ne m'en suis jamais servi.

Je monte mes sites "on scratch", la plupart du temps, en m'appuyant parfois sur des constructions de templates préalables éprouvées.

[Ducace]

Mouais... bon... les pages WEB avec Photoshop, c'est vraiment pour les sites d'avant HTML5 et CSS3. Et encore, perso, je ne m'en suis jamais servi.

Je monte mes sites "on scratch", la plupart du temps, en m'appuyant parfois sur des constructions de templates préalables éprouvées.

Ouais, pareil.
Ayant eu l'occasion de faire faire un gros site (le client voulais un gros machin ;-)) avec une société assez connue en Belgique, j'ai travaillé avec un équipe de développement, layout, mise en place, référencement, etc.
Et en effet, les maquettistes proposent un layout Photoshop avant de commencer la construction du site.
Processus obligé par le partage des tâches.
Au final, le résultat était malheureusement fort rigide et peu propice à la créativité.

[No6]

Brackets est livré avec un modude pour extraire les infos utiles des PSD....

http://brackets.io/

[Eagle Kiss]

Cri-cri : J'ai regardé (vite fait) ça ressemble à ce que proposait Fireworks à l'époque, non ? !Fireworks, qui lui-même avait pour origine le bon vieux Image-Ready). Mais à première vue, je me demande si ça fait ce que je recherche à faire en automatique...

Si ma mémoire est bonne, Image Ready était un développement web de Photoshop mais orienté pixel.
Fireworks, lui, provenait de la planète Macromedia (avec Freehand, Flash, etc.)
Donc pas de filiation directe.

Tout à fait. Imageready et Fireworks n'ont rien en commun. L'un fait des images animés et l'autre des mise en page multimedia.

Ce message a été modifié par Eagle Kiss - 30 Dec 2014, 10:52.

[scoch]

Il existe par exemple SiteGrinder qui permettrait ce genre de prestation, mais je n'ai pas eu l'occasion de tester. A votre connaissance, ou d'après votre expérience, quelle serait la meilleure solution pour quelqu'un qui bricole le code mais qui n'est pas un expert... ?

Merci

Si tu utilises la version CC de Photoshop tu peux jeter un œil à Adobe Generator qui permet de générer du HTML/CSS.
Je ne peux pas te dire si c'est efficace ou pas, je préfère utiliser mes doigts pour créer les gabarits WordPress

Brackets est livré avec un modude pour extraire les infos utiles des PSD....

http://brackets.io/

Je n'ai pas testé le module Extract (en bêta) mais Brackets est pas mal du tout avec sa fonctionnalité d'aperçu en direct et toutes ses extensions (code snippets, beautyfier, sync ftp, etc). Je suis en train de lâcher SublimeText pour Brackets.

[No6]

Brackets est livré avec un modude pour extraire les infos utiles des PSD....
http://brackets.io/

Je n'ai pas testé le module Extract (en bêta) mais Brackets est pas mal du tout avec sa fonctionnalité d'aperçu en direct et toutes ses extensions (code snippets, beautyfier, sync ftp, etc). Je suis en train de lâcher SublimeText pour Brackets.

Pareil..
PS les "meilleures" extensions pour Brackets ne sont forcément celles proposées dans le Gestionnaire de l'EDI.
J'utilise InlineColorEditor de GarthDB comme color Picker... ( celui-ci me convient le mieux que bien d'autres essayés)
https://github.com/GarthDB/brackets-inline-color-editor

[Sgt.Pepper]

J'utilise InlineColorEditor de GarthDB comme color Picker... ( celui-ci me convient le mieux que bien d'autres essayés)
https://github.com/GarthDB/brackets-inline-color-editor

M'étant mis aussi à Brackets, j'ai voulu tester l'extension dont tu parles.

Glissé le doss dans Application Support > Brackets > extensions > user

Mais le color picker ne s'affiche nulle part (clic droit ou autre) ?

[No6]

Préalablement le curseur doit être sur un un texte rensegnant une couleur (typiquement dansun fichier css sur un " #123 ou un un rgba(55, 58, 71, 0.74) ou... etc.)

puis utiliser la touche Edition rapide (pomme E voir menu Naviguer) qui sur ce cas la va lancer le color picker..



Il y a un très bon tuto sur Brackets, encore une fois sur grafikart : http://www.grafikart.fr/tutoriels/html-css/brackets-532


Ce message a été modifié par No6 - 31 Dec 2014, 14:48.

[Sgt.Pepper]

Préalablement le curseur doit être sur un un texte rensegnant une couleur (typiquement dansun fichier css sur un " #123 ou un un rgba(55, 58, 71, 0.74) ou... etc.)

Oui, bien sûr, évidemment !

puis utiliser la touche Edition rapide (pomme E voir menu Naviguer) qui sur ce cas la va lancer le color picker..



Il y a un très bon tuto sur Brackets, encore une fois sur grafikart : http://www.grafikart.fr/tutoriels/html-css/brackets-532

Ah... cmd E ! suis-je con.


Merci à toi !