Creation de site avec photoshop ??? (urgent)
ARNET
-
Smoking bird Messages postés 911 Statut Membre -
Smoking bird Messages postés 911 Statut Membre -
Bonjour a tous et heureuse année a tous ,
Je suis graphiste de formation et je suis en train de créer mon site web avec photoshop.
Jusqu'ici tout va bien....
J'ai un fichier .psd (700*525px) que je transforme en jpg ensuite pour la compression des couleurs pour le web.
C'est ma page d'accueil (site en construction) en attendant de créer tout mon site.
Le problème est que je ne sais pas comment procéder pour le mettre en ligne sur internet (j'ai déjà un nom de domaine,un ftp...).
Car la plupart du temps un site se constitue d'un header,d'un menu,d'un contenu que l'on peut coder en HTML (m'a t-on dit), mais la il s'agit juste d'un jpg en 700*525 que je voudrait mettre en ligne pour patienter et surtout je voudrait qu'il s'affiche correctement sur toutes les résolutions d'écran et toutes les taille d'écran....
Quelle est la marche a suivre ?
Comment puis-je faire le plus simplement ?
Est ce que quelqu'un peut me donner un coup de main s'il vous plait ???
Je m'y connais pas du tout en codage mais j'ai soif d'apprendre
et c'est assez urgent....
Merci d'avance et meilleurs vœux a tous....
N*E*R*D
"No one ever really die"
Je suis graphiste de formation et je suis en train de créer mon site web avec photoshop.
Jusqu'ici tout va bien....
J'ai un fichier .psd (700*525px) que je transforme en jpg ensuite pour la compression des couleurs pour le web.
C'est ma page d'accueil (site en construction) en attendant de créer tout mon site.
Le problème est que je ne sais pas comment procéder pour le mettre en ligne sur internet (j'ai déjà un nom de domaine,un ftp...).
Car la plupart du temps un site se constitue d'un header,d'un menu,d'un contenu que l'on peut coder en HTML (m'a t-on dit), mais la il s'agit juste d'un jpg en 700*525 que je voudrait mettre en ligne pour patienter et surtout je voudrait qu'il s'affiche correctement sur toutes les résolutions d'écran et toutes les taille d'écran....
Quelle est la marche a suivre ?
Comment puis-je faire le plus simplement ?
Est ce que quelqu'un peut me donner un coup de main s'il vous plait ???
Je m'y connais pas du tout en codage mais j'ai soif d'apprendre
et c'est assez urgent....
Merci d'avance et meilleurs vœux a tous....
N*E*R*D
"No one ever really die"
A voir également:
- Creation de site avec photoshop ??? (urgent)
- Site de telechargement - Accueil - Outils
- Creation de site web - Guide
- Site comme coco - Accueil - Réseaux sociaux
- Quel site remplace coco - Accueil - Réseaux sociaux
- Site x - Guide
11 réponses
Bonjour,
Déjà si tu enregistre ton image en jpg, tu ne pourra aucunement avoir de lien sur celle-ci.
Via Photoshop il est possible de composer directement des pages en utilisant l'outil tranche qui permet de placer des liens sur l'image. Il suffit ensuite d'enregistre l'image pour le web (y'a un truc comme ça dans le menu Fichier) et de mettre ça en html + image (y'a ça dans le type de fichier pour l'enregistrement).
Si tu fais une simple image que tu veux mettre sur le web en page d'accueil, il faudra dans tout les cas l'inclure dans une page html mais elle est toute simple.
Une page d'accueil d'un site doit se nommer très précisement index.html ou index.php.
Tu peux donc faire une page toute simple:
Il s'agit là d'un code tout simple.
Là par contre elle sera calée dans le coin supérieur gauche du navigateur, le reste étant blanc.
Vue la taille de ton fichier ça ne sera pas dérangeant pour un petit écran. Par contre, pas très estétique pour un plus grand comme le miens par exemple en 1440x900px.
Le mieux est encore de mettre une couleur de fond et de centrer l'image. Pour ça renseigne toi du côté de CSS qui te sera indispensable pour la suite.
Déjà si tu enregistre ton image en jpg, tu ne pourra aucunement avoir de lien sur celle-ci.
Via Photoshop il est possible de composer directement des pages en utilisant l'outil tranche qui permet de placer des liens sur l'image. Il suffit ensuite d'enregistre l'image pour le web (y'a un truc comme ça dans le menu Fichier) et de mettre ça en html + image (y'a ça dans le type de fichier pour l'enregistrement).
Si tu fais une simple image que tu veux mettre sur le web en page d'accueil, il faudra dans tout les cas l'inclure dans une page html mais elle est toute simple.
Une page d'accueil d'un site doit se nommer très précisement index.html ou index.php.
Tu peux donc faire une page toute simple:
<html> <head> <title>Accueil</title> <body> <img src="#chemin de l'image#/#nom du fichier#.jpg" alt="" /> </body> </html>
Il s'agit là d'un code tout simple.
Là par contre elle sera calée dans le coin supérieur gauche du navigateur, le reste étant blanc.
Vue la taille de ton fichier ça ne sera pas dérangeant pour un petit écran. Par contre, pas très estétique pour un plus grand comme le miens par exemple en 1440x900px.
Le mieux est encore de mettre une couleur de fond et de centrer l'image. Pour ça renseigne toi du côté de CSS qui te sera indispensable pour la suite.
L'inconvénient c'est que ton image de base est défini a une certaine taille. Un écran également. L'affichage de ta page est défini par ce dernier.
Tu pourrai très bien définir la taille de ton image sur ta page en CSS. Ainsi par exemple tu peux mettre un height="100%" et un width="100%". L'image prendra l'écran quelques soit sa résolution. Toutefois la qualité de dégradera d'autant.
De plus, les rapport hauteur/largeur ne sont pas toujours les même entre un écran 4/3 et un 16/9.
Tu pourrai très bien définir la taille de ton image sur ta page en CSS. Ainsi par exemple tu peux mettre un height="100%" et un width="100%". L'image prendra l'écran quelques soit sa résolution. Toutefois la qualité de dégradera d'autant.
De plus, les rapport hauteur/largeur ne sont pas toujours les même entre un écran 4/3 et un 16/9.
Pas possible d'étendre ton jpeg le seul moyen d'étendre un truc comme ça c'est qu'il soit vectoriel et accessible par une page web = c'est du flash !
Donc il faudra accepter que ton image s'affiche différemment suivant les config en attendant la version définitive du site...
Donc il faudra accepter que ton image s'affiche différemment suivant les config en attendant la version définitive du site...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
tu pourrais faire une détection de la taille de l'écran du visiteur, ou en tous les cas de son navigateur, en déterminer un rapport hauteur/largeur (16/9 ou 4/3) avec quelques petites approximations et remplacer ton image de fond en la mettant en 100%, sachant que pour les différents rapports tu prendrais les résolutions maximales possible, tout ça en javascript, ça pourrait à peu près convenir... Mais c'est beaucoup de travail pour pas grand chose^^, AdminTOURS a raison là dessus
Faire ton image en dimensions standard (1024 il me semble^^), pour que la majorité théorique puisse voir ta page comme chez toi, avec l'image qui prends toute la place, et l'aligner au centre de ton navigateur dès que la taille est plus grande^^, grâce à la magie des css, tu peux la mettre pile au milieu, et pas au milieu en haut^^. Si ton image a une espèce de couleur de fond, ou un motif répétitif de fond, n'hésite pas à adapter le background de ton index, que ça fasse moins 'image collée'
Est ce que tu aurai le code css pour le mettre au milieu de l'ecran quelque soit taille ???
ce m'arangerai bien ca
au moins meme si il ne prend pas tout l'ecran, je le mets au format 1024/768 et il apparaitra au milieu de la page de mon visiteur
ca serai deja plus propre
ce m'arangerai bien ca
au moins meme si il ne prend pas tout l'ecran, je le mets au format 1024/768 et il apparaitra au milieu de la page de mon visiteur
ca serai deja plus propre
body {
padding:0em; margin:0em; text-align:center;
}
#tonImage {
padding:0em; margin:auto; width:1024px; height:768px;
}
ça devrait suffire, sinon tu précises le margin ainsi:
margin-left:auto; margin-right:auto; margin-top:auto; margin-bottom:auto;
et tu ajoutes un bord de 1px de la couleur du background de ton site autour de l'image^^
EST CE QUE CE CODE POURRAI CORRESPONDRE PAR EXEMPLE :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Alternative média musicale "Toute l'actualité de toutes les musiques</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">#contenu{ position:absolute;left: 50%; top: 50%;
margin-top: -300px; /* moitié de la hauteur de l'image */
margin-left: -400px; /* moitié de la largeur de l'image */
} </style>
</head>
<body>
<div id="contenu">
<img src="images/premierepage.jpg" alt="bientot en ligne" width="800" height="600">
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Alternative média musicale "Toute l'actualité de toutes les musiques</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">#contenu{ position:absolute;left: 50%; top: 50%;
margin-top: -300px; /* moitié de la hauteur de l'image */
margin-left: -400px; /* moitié de la largeur de l'image */
} </style>
</head>
<body>
<div id="contenu">
<img src="images/premierepage.jpg" alt="bientot en ligne" width="800" height="600">
</div>
</div>
</body>
</html>
tes css ne sont pas très propres, l'utilisation des % n'est pas vraiment recommandé, et les valeurs de type margin ne sont pas particulièrement destinées à être en négatif^^, ça peut fonctionner, mais je ne t'encouragerais pas à prendre de mauvaises habitudes^^, qui te compliqueraient le travail à l'avenir, lorsque tu auras de plus gros trucs à gérer avec^^
Effectivement je savais que l'on peut passer sur image ready et découper mon image avec les tranches pour les lien en autres.
Seulement pour l'instant il n'y a aucun lien sur ma première page.
C'est juste une page de présentation graphiquement travailler.
Je sais aussi qu'imageready génère un code html et que je peux le copier coller sur notepad++ (en autre)...
Je l'ai essayer ce matin et sur mon écran niquel il apparait bien et prend toute la place de mon écran.
Mais quand je suis partit chez un amis qui a deux écran chez lui (un hyper grand et un de 17pouces) mon image apparait sur la naviguateur plus petit en haut (centrer bien sur car j'ai rajouter une balise center) mais elle ne prend pas tout la surface de l'ecran...
Ce que je voudrai, c'est que quelque soit la taille de l'écran de gens qui vont visiter ma page d'accueil , mon image apparaisse comme chez moi et prenne toute la taille de l'écran...
Est ce que quelqu'un peut m'aider car je galère grave ???
Il doit y avoir une solution ???
Si quelqu'un peut me donner un coup de main perso ça serait hyper cool et ça m'enlèverai un poids énorme....