Utiliser maquette d'un formulaire

Fermé
allan59820 Messages postés 76 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 17 octobre 2020 - 1 mars 2015 à 18:25
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 2 mars 2015 à 01:29
bonjour,

ne trouvant aucun tuto ou explication concernant ma recherche je me tourne vers vous.

Je souhaiterais faire un formulaire sous photoshop, mais je ne sais pas comment l'utiliser pour un futur projet de site web.

Comment faire pour que les personne puisse inscrire leur pseudo, mot de passe etc dans les cases faite avec photoshop et integrer aussi le bouton d'envoi. Merci d'avance pour vos réponses !!!

3 réponses

Shuta Messages postés 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021 3
1 mars 2015 à 20:36
Bonsoir,
Tu comptes utiliser des images créées via photoshop et les rajouter avec du code ?

Si c'est ça, je pourrai t'aider facilement.
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
1 mars 2015 à 20:37
Salut
tu ne peux pas
photoshop crée des images
un formulaire c'est du code html avec le plus souvent une page de traitement php
pour mettre en forme le formulaire (html) tu dois utiliser CSS
donc tu dois connaitre html et css au minimum
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3

ce que tu veux faire, c'est comme découper une image dans un magasine, la coller sur son écran (avec de la colle) et tenter de modifier cette image avec un logiciel de traitement d'image.
0
allan59820 Messages postés 76 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 17 octobre 2020 5
1 mars 2015 à 21:15
ok merci pour vos réponses c'est parce que plusieurs vidéos concernent des maquettes de formulaire et le font avec Photoshop c'est pour cela. comme les personnes qui dans leur webdesign font un rectangle arrondi pour faire une barre de recherche elle sert a rien elle est factice alors ?
0
Shuta Messages postés 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021 3
1 mars 2015 à 21:20
Alors photoshop est beaucoup utilisé pour les sites pour faire des modèles.
Il est pratique car on peut tout situer sur une page.
Après beaucoup de choses peuvent être faites en 2-3 lignes de css sans utiliser d'image (qui rendrai la page plus lourde)

En ce qui concerne le montage de formulaire, tu peux faire le modèle sur photoshop, puis découper les images pour les intégrer a une page que tu créée.

Sinon il y a bien des logiciels de graphisme qui permettent de faire des sites avec des permaliens, comme illustrator il me semble ?

Mais si tu veux faire ton formulaire en image je peux t'aider a l'intégrer après en codes.
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 1/03/2015 à 22:00
exemple : un rectangle arrondi n'est pas une image mais un element html (div ou input) et avec css on lui donne des coins arrondis, une bordure, une taille et une couleur de fond

exemple codé
html
<input type="text" class="maclasse" />


css
.maclasse {
width:300px;
height:30px;
border:1px solid black;
background-color: grey;
border-radius: 5px;
}


l'ensemble de ce code veux dire

un champ de texte a remplir de 300 pixels de large et de 30 pixel de haut, avec une bordure noire continue de 1 pixel, une couleur de fond grise et des coins arrondis de 5 pixels de radius
0
Shuta Messages postés 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021 3
1 mars 2015 à 23:12
Le code donné par animostab est un code classique mais efficace.
Après tu peux intégrer une image a la place du cadre pour une esthetique particulière et définie. Mais maintenant avec du css on peut faire BEAUCOUP de choses.
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
2 mars 2015 à 01:29
exemple du "beaucoup de choses" : une animation en html / css3 sans javascript avec juste des keyframes et des background images (sprites et png non animés)
http://codepen.io/rachelnabors/pen/AvGhp
0