Bienvenue à toutes les personnes qui suivent le MOOC "Maquettez votre site responsive avec Photoshop" !

J’espère vous donner, tout au long de cette initiation au responsive design, l’envie d’en savoir un peu plus sur cette notion indispensable pour la conception de vos sites web.

Que ce soit sur le responsive, les techniques photoshop ou les fichiers que je fournis dans le cours, n'hésitez pas à me poser vos questions directement sur ce forum.

Je ferai de mon mieux pour répondre régulièrement à vos questions. Mais vous pouvez également profiter de ce forum pour vous entre-aider et partager votre propre expertise... Ainsi que vos inspirations et projets personnels de site responsive !

À très vite et bon cours ! 

Virak

-
Edité par Camille_D 11 mai 2015 à 18:53:25

Bonjour, j'ai débuté la conception de la maquette mobile sur photoshop et je constate qu'avec les dimensions 1080x3840, la page est très petite. Et ce normal?

Bonjour je suis actuellement entrain de commencer  la première activité, mais je n'arrive pas à activer la grille fluide pour avoir les 12 colonnes

je n'ai pas "Affichage" > "Nouvelles dispositions de repères"  mais j'ai "Affichage" > "Nouveau repère..." et sa n'a rien avoir avec ce qu'il y a dans le cours

Il y a une autre possibilité de l'activer si ça n'est pas dans le menu ? 

Bonjour,

>zozourban : J'ai le même problème. Pas d'option "Nouvelles dispositions de repères" dans le menu Affichage (la version de photoshop peut être). Cependant, on peut récupérer la grille de la maquette faite par Virak, elle colle pour l'exercice. Par contre, pour le home page qu'est-ce qu'il entend exactement par "une image de profil" ?

Pourtant, j'ai la même version soit la CC 2014, il y a peut être une différence avec la version Mac

Pour l'image de profil je pense, un rectangle ou rond avec dedans une image afin d'en faire une biographie

Edit : Alors la fonctionnalité "Nouvelles dispositions de repères" est disponible que sur Photoshop CC 2014 et seulement a partir de la version 2014.2

J'avais la 2014.0 sa explique pourquoi l'option n’était pas disponible dans le menu

-
Edité par zozourban 17 mai 2015 à 22:30:15

Bonjour, 

Je vous remercie de suivre le cours Et pour répondre à vos questions :

Didy_972 : L'aperçu de votre document est affiché pour s'adapter à la taille de votre écran.C'est donc tout à faire normal que le document semble très petit, mais je vous rassure il fait bien 1080 x 3840 pixels. Vous pouvez utiliser les différentes options de l'outil "LOUPE" pour zoomer et dézoomer dans votre document :).

Zozourban : En effet cette option est disponible uniquement avec la dernière version Photoshop. Si vous avez récupéré la version d'évaluation ou si vous avez une licence Adobe CC2014 mise à jour, vous avez accès à l'outil :"Nouvelle disposition de repères".

Il existe une alternative :
Un plugin gratuit pour la création de grilles à destination des anciennes versions de Photoshop , "guideguide" disponible sur http://guideguide.me/

 

Gzav06 : Zozourban a très bien répondu à votre question

N'hésitez pas à me poser vos toutes vos questions pour la suite du projet.

Bon courage.

Virak

PS: Via ce lien je vous mets à disposition un psd avec une grille de 12 colonnes pour votre maquette. Le fichier est compatible avec les anciennes versions de Photoshop ;) 

-
Edité par virakmey 20 mai 2015 à 4:32:48

Bonjour,

J'ai un souci pour envoyer mon activité de la partie 2.

Elle fait un peu plus de 70 Mo. En d'autres termes, elle fait plus que la limite autorisée.

J'ai pourtant exporté mes maquettes au format .jpeg avec "Enregistrer pour le web" et, avant l'export, "Aplatir l'image" mais c'est encore trop.

Comment faire ?

Merci par avance

-
Edité par afournier 19 mai 2015 à 11:19:53

Bonjour afournier,

Même compressé en .zip, le fichier dépasse les 70 mo?

Vous pouvez essayer ces manipulations:

- Vérifiez que vous avez une résolution de 72 pixels/pouce pour votre document. Une valeur plus grande augmente la taille du fichier.

- Une fois que vous êtes dans la fenêtre du menu "Enregistrer pour le web" choisissez le format JPEG et essayez de rentrer une valeur dans la partie "qualité" comprise entre 60 et 80.
Votre fichier ".jpeg" à la sortie devrait avoir un poids moins important.
 

Tenez-moi au courant

Virak

-
Edité par virakmey 19 mai 2015 à 11:46:18

Bonjour,

Doit t'on respecter la dimension de l'image de profil format 900x615, ainsi que celle pour la page CV, car elle ne colle pas avec mon design.

Merci

Bonsoir virakmey,

J'ai trouvé d'où cela venait !

Je croyais que j'avais mis tous mes fichiers en basse résolution, seulement j'avais une photo restée en haute résolution.

Merci

Bonjour Wesheida, 

Pour l'image de profil il faut la créer dans un fichier psd à part ( car vous vous en servirez plus tard pour l'intégration ), l'importer dans votre design et la redimensionner.

Bonjour afournier, 

Je suis content que votre problème soit résolu

Bonjour,

Merci pour le lien du plugin sur la création de grilles.

A propos de l'exercice, dans la mesure ou "les maquettes devront coller au modèle de structure présenté", l’énoncé me pose le problème suivant : Les dimensions d'une image sont définies  par sa longueur et sa hauteur (LxH,  comme sous Photoshop). L'énonce demande de travailler une image en 1920x1272px et la maquette laisse un emplacement de 1080x1920px (éventuellement 1080x1480px moins le rectangle haut avec le logo). Donc, on peut jouer sur la largeur en tronquant l'image, mais en hauteur y manque de la "matière", et si on fait un ré-échantillonnage (pas proportionnel), l'image ne ressemble plus à rien du tout (surtout dans le cas d'une photo).  Aussi malgré quelques explications, je reste un peu perplexe devant les directives concernant les images : "Une image de profil(?)","Une infographie de votre parcours(?), ou à défaut une autre illustration(ah,ok)"   

Merci

Bonsoir gzav06,

En vous calant sur le modèle de structure de 1080x3840 pixels.

Vous pouvez agrandir proportionnellement votre image de couverture pour l'adapter à la hauteur de 1920 px.
Elle sera forcément tronquée sur la largeur dans votre maquette d'aperçu mobile, mais c'est tout à fait normal.

La structure du gabarit existant fera réagir l'image de cette façon quand votre site sera intégré sur Bootstrap et affiché sur un écran mobile.

Avec les dimensions de 1920x1272 px, votre image de couverture sera déjà prête pour la maquette aperçu desktop et le gabarit final intégré (Ainsi que toutes les autres images demandées pour votre maquette). 

Il est possible bien sûr d'adapter légèrement la taille de vos images importées dans votre maquette. N'oubliez pas que nous sommes sur un aperçu graphique fixe, et que le plus important est de rendre compte avant tout de l'aspect visuel de vos créations.

Amusez vous dans la réalisation de vos éléments visuels

Bon courage et n'hésitez pas si vous avez d'autres questions

Virak

Bonjour,

J'ai télécharger le plugin guideguide, mais comment je dois procéder pour l'intégrer dans Photoshop?

J'aimerai aussi avoir les explications concernant "Une image de profil" parce que jusque là je ne comprend pas vraiment

Merci! 

Bonjour,

Bien que mon fichier zip ne fasse que 24 Mo, la soumission ne se fait pas. Je l'ai déjà lancé environ 10 fois, donc sauf si vous l'avez reçu auriez vus une autre solution a me proposer

Merci.

Bonsoir, 

Petite question au sujet de l'exercice "maquette mobile", sur la page CV faut-il laisser le header et le footer comme sur la home page? Cela me semblerait logique (ou au moins le menu hamburger ou un bouton retour), car si on ne le mets pas comment navigue t-on entre les 2 pages? Mais comme dans l'exemple il n'y est pas je me posais la question.. 

Merci d'avance:)

Salut a tous j'apprecie bien bien ce cour mais serait-ce possible, voir pas trop compliqué de le prendre en cours maintenant?

isidorebredou a écrit:

Salut a tous j'apprecie bien bien ce cour mais serait-ce possible, voir pas trop compliqué de le prendre en cours maintenant?

Bonjour isidorebredou,

Vous pouvez commencer le cours à n'importe quel moment (comme tous les autres cours de notre plateforme qui sont accessibles en permanence), donc pas de soucis si vous souhaitez vous lancer aujourd'hui 

À partir de votre inscription, vous aurez un délai d'une semaine pour rendre les exercices de la première partie, puis la semaine suivante pour rendre les exercices de la deuxième partie, etc.

Bon cours !

JonathanMatondo a écrit:

Bonjour,

J'ai télécharger le plugin guideguide, mais comment je dois procéder pour l'intégrer dans Photoshop?

Bonjour JonathanMatondo,

Voici le lien tutoriel pour installer le plugin:
http://guideguide.me/documentation

Ensuite, ouvrir Photoshop, puis aller dans le menu "Fenêtre"/"Extensions".

Là, dois se trouver le plugin GuideGuide. Il suffit alors de cliquer et c'est gagné !

-
Edité par Anonyme 28 mai 2015 à 10:34:45

Bonjour,

Nouvel iMac Retina avec Mac OS 10.10 (Yosemite) : impossible de télécharger la version d'essai CC d'Adobe. Auriez-vous des échos/solutions à ce sujet ?

Merci d'avance.

Chee

Résolu : Cooliris entrait apparemment en conflit avec CC - A toutes fins utiles pour d'autres utilisateurs qui auraient le même problème :-)

-
Edité par Chee 31 mai 2015 à 14:21:28

Bonjour,

Merci pour ce cours qui est très utile et bien fait

Lorsque l'on créer les maquettes mobile et desktop, est-ce qu'il faut aligner les éléments de la même façon sur les 12 colonnes pour que le responsive fonctionne bien ? par exemple, si on met un bloc de texte sur la 3ème colonne dans la maquette mobile, est-ce qu'il faut aussi que ce soit sur la 3ème colonne dans la version desktop ? 

En fait, je me demande comment faut-il gérer la disposition des éléments par rapport à ces fameuses colonnes. Et comment fonctionne le principe de responsive design par rapport à cela. Quelles sont les règles qui vont agir quand on va réduire la taille du navigateur ? (est-ce que le contenu apparait dans l'ordre des colonnes ou pas du tout... ?).

Je ne sais pas si je suis claire dans mes explications... N'hésitez pas à me dire si ce n'est pas le cas

Laure 

Bonjour,

Qqn aurait-il les consignes de l'exercice de la semaine 2 "concevez la maquette "aperçu mobile" de votre portfolio"   ? Suite à un problème technique (voir plus haut), je n'ai pas eu accès à Photoshop et n'ai maintenant plus accès à l'énoncé, étant déjà passé en semaine 3 ...

Merci d'avance :-)

Chee

Bonjour,

J'ai exporter les éléments graphiques de ma maquette puis nommer comme demandé, mais après avoir glisser et écraser les éléments existants dans le dossier image du gabarit qu'on viens de télécharger, et en actualisant le navigateur, j'ai constaté que l'image de profil n’apparaît, et l'image de profil dans le dossier image a comme nom profil mais on nous a demandé de le nommer par moi1.jpeg.

Je me demande si je peux le renommer correctement

Cordiallement

JonathanMatondo a écrit:

Bonjour,

J'ai exporter les éléments graphiques de ma maquette puis nommer comme demandé, mais après avoir glisser et écraser les éléments existants dans le dossier image du gabarit qu'on viens de télécharger, et en actualisant le navigateur, j'ai constaté que l'image de profil n’apparaît, et l'image de profil dans le dossier image a comme nom profil mais on nous a demandé de le nommer par moi1.jpeg.

Je me demande si je peux le renommer correctement

Cordiallement

Vous avez tout à fait raison, la consigne n'était pas cohérente avec le template de code fourni. Je viens de mettre à jour la consigne pour demander de renommer l'image de profil "profil.jpg" (au lieu de "moi1.jpg"). Merci pour votre vigilance ! 

Merci pour l'info car j'avais eu le même souci

-
Edité par delphkim 5 juin 2015 à 21:54:51

Bonjour,

@Virakmey, serait-il possible que je remette l'activité sur la maquette mobile aujourd'hui avant minuit? Normalement je devrait le remettre cet après-midi mais a cause de quelque problèmes je ne pourrai pas le remettre à temps.

Bonjour,

est-il possible de rajouter des élèments dans la partie portfolio ?

en effet le template worthy semble être prévu pour contenir 12 images .

J'ai testé de copier coller et renommer la partie correspondante dans le html (en renommant project 13 par exemple) mais rien ne change l'image rajouté ne s'affiche pas.

Merci d'avance pour votre réponse.

Bonjour mon site maquettez sera-il-compatible avec le PHP ?

Bonjour, 

Je suis nouvelle parmi vous, et je suis à la recherche d'un logiciel gratuit de création des catalogues.

Merci pour vos propositions.

Imane