JeuWeb - Crée ton jeu par navigateur
Créer une interface - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Art, graphisme, audio (https://jeuweb.org/forumdisplay.php?fid=50)
+--- Sujet : Créer une interface (/showthread.php?tid=1344)

Pages : 1 2 3 4 5 6 7

RE: Créer une interface - Racktor - 05-06-2014

Je poste vite fait ce que cela donne mais j'ai juste fait le bouton habitation ...
[Image: mini_847957interface.png]

Est-ce mieux ?

RE: Créer une interface - @lucard - 05-06-2014

oui c'est un bon début. il ne reste plus qu'a refaire les autres boutons, les banières (des menus) les boucliers :p
mais en variant un peu pour ne pas avoir de "redondance" trop prononcée... =)

x) c'est pas facile hein ?

RE: Créer une interface - Racktor - 05-06-2014

Comme on dit dans m'in coin !

Que vie qu'on mène ! Big Grin
bon pour l'instant je ne ferais que les boutons en gris, les boucliers je travaillerai cela après ...

petite question de débutant ...
Quand vous faite la base de votre webdesign, vous faites un document de quelle taille dans photoshop ? je sais que l'on peut redimensionner après mais au départ vous faites comment ?

RE: Créer une interface - @lucard - 05-06-2014

Personnellement, je travail à l'échelle 1:1 (1pixel = 1pixel)

pour des illustrations, quand celle-ci seront petite (< 200x200 px), je travaille en 3 voir 4:1 pour être sur que ça sera "compréhensible"
pour les boutons, background, et caetera, c'est du 1:1...
pas la peine de faire des détails si ils sont trop petits pour être vu. =)

RE: Créer une interface - Racktor - 05-06-2014

mais pour un web design qu'il s'agit ensuite de "trancher" et d'intégrer ?

RE: Créer une interface - Arkhanz - 05-06-2014

Pour la réalisation d'un webdesign j'ouvre un grand document (1500x1000 minimum) mais c'est souvent parce que j'ai une image comme background est elles sont souvent très grandes elles aussi (1680x1200 minimum). Mais bon, par habitude et par confort même si j'ai un fond uni je pars sur un grand document.

RE: Créer une interface - Xenos - 05-06-2014

>.<

Perso, j'utilise une feuille de papier pour savoir grosso modo où va chaque truc et quel est le flux d'affichage de la page. Après, j'attaque directement le CSS (pour le webdesign, donc, pas pour faire une image du site)...
Je trouve qu'ouvrir un doc photoshop, avec un canvas bien spécifique (quelle que soit sa taille), c'est se fermer au responsive design, et galérer par la suite quand le support sera plus petit/plus grand que prévu, aura un ratio différent, ou même, changera de type d'affichage (imprimante, lecteurs d'écran, futurs supports 3D, ou montres).

RE: Créer une interface - niahoo - 05-06-2014

pareil mais moi c'est parce que je n'ai aucune skill en photoshop !

RE: Créer une interface - Arkhanz - 05-06-2014

(05-06-2014, 04:35 PM)Xenos a écrit : >.<

Perso, j'utilise une feuille de papier pour savoir grosso modo où va chaque truc et quel est le flux d'affichage de la page. Après, j'attaque directement le CSS (pour le webdesign, donc, pas pour faire une image du site)...
Je trouve qu'ouvrir un doc photoshop, avec un canvas bien spécifique (quelle que soit sa taille), c'est se fermer au responsive design, et galérer par la suite quand le support sera plus petit/plus grand que prévu, aura un ratio différent, ou même, changera de type d'affichage (imprimante, lecteurs d'écran, futurs supports 3D, ou montres).

Je suis d'accord avec toi mais j'ai une réserve pour quelques raisons qui ne sont pas logiques ou recevables mais personnelles. Premièrement tout le monde ne veut pas faire son site de façon à ce qu'il soit optimisé pour n'importe quel type et taille d'affichage (erreur ou non, on ne peut rien faire contre les goûts); deuxièmement photoshop ne ferme pas complètement au responsive design parce que faire un design sur photoshop ne représentera pas forcément ce qu'on fera au final, certains l'utilisent aussi comme feuille de papier, et c'est mon cas, d'autant plus qu'un découpage adéquat permet d'avoir un responsive design tout aussi sympathique à regarder que du css pur (même si on doit garder des valeurs minimales de taille, mais faut faire avec quand on veut frimer).

Après c'est sûr, la plupart du temps, c'est galère de faire d'un découpage photoshop un responsive design, mais je reste complètement et à 100% d'accord avec toi concernant l'utilisation du papier (et pas que pour le design).

RE: Créer une interface - @lucard - 05-06-2014

Photoshop + responsive design = "difficile mais faisable"

En fait il faut savoir ce qu'on veut dès le départ et faire en fonction des limites imposées ( que ce soit par le responsive, ou par photshop)
pour ma part, faire du responsive c'est faire des "textures" et non faire des "images"

pour un bouton en responsive il faut mieux faire
-une <div> avec un background qui se répète sans limite de taille
plutôt que
-une <img> qui aura des valeurs fixes en x et y (width, height).

le css permet maintenant de faire plein d'"effets" qui, avec astuce, ressemble aux filtres de toshop.
shadow, gradient, alpha, border, gaussian blur, fonts...
(ombre portée, dégradé, transparence, contour, flou, polices d'écriture ...)

l'avantage de toshop, c'est qu'on voit tout de suite ce qu'on fait.
l'inconvénient, il faut prévoir comment réagira l'image (fixed, cover, stretch...)

Pour ce qui est de la taille de ma page blanche sur photoshop je commence en HD : 1920x1080,
mais le site doit pouvoir tenir dans 850px de largeur pour la partie "essentielle" du site ( max-width:850px; ) (le reste de la page sera masqué si l'écran est plus petit)