Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Infographie
Faire un site débutant avec une image sur Photoshop
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="BEK." data-source="post: 2595887" data-attributes="member: 18061"><p>Salut la commuanuté,</p><p>Je vous propose encore un nouveaux tutoriel porté sur l'infographie, mais aussi sur les sites internet, plus précisément sur la création de site pour les débutant avec Photoshop. Il faut savoir que ce genre de site ne sont pas vraiment des site, mais plus une image ou l'on ajoute des lien, donc ne vous attendez pas a un site parfait sans bug ou autre. Cela peut ètre utile pour ceux qui veulent ne pas ce cassé la tête a apprendre le codage html, css, php et javascript. Il ne faut que simplement savoir utilisé Photoshop.</p><p>Dans ce tutoriel je vous apprend a créer la page d'accueil seulement, pour créer d'autre page veuillé repétter l'opération en changeant le design sur photoshop par le design de la page que vous voulez faire.</p><p>Ce tutoriel va donc consisté à apprendre manier les options de fusion de Photoshop.</p><p>Vous aurez besoin de notepad++, du moins c'est conseillé.</p><p></p><p><u><em><strong>Sommaire</strong></em></u><em><strong> :</strong></em></p><p>- Mise en forme de la page sur Photoshop</p><p>-Image vers Codage</p><p>-Entré le codage dans un fichier HTML</p><p>-Héberger</p><p></p><p></p><p><span style="color: #003366"><strong><em><span style="font-size: 22px">-Mise en forme</span></em></strong></span></p><p>Pour pouvoir créer un site avec photoshop, il faut déjà le mettre en page et créer son design avec Photoshop. Vous allez donc cliquer sur Fichier puis sur Nouveau et prenez les paramètres suivant :</p><p>[ATTACH=full]11638[/ATTACH]</p><p></p><p></p><p>Après avoir créer sa mise en page, on va s'occupé de créer le design de votre site , je met a disposition l'exemple par étape que j'ai réalisé pour ce tutoriel. Soyez organisé dans la gestion de vos calques comme moi sur les images, cela aide a s'y retrouvé et est important pour la suite du tutoriel, mémorisé l'ordre de création de chaque calque.</p><p></p><p>Bannière (Header) :</p><p>[ATTACH=full]11639[/ATTACH]</p><p></p><p>Barre de naviguation (Navbar) :</p><p>[ATTACH=full]11640[/ATTACH]</p><p></p><p>Corp (Body) :</p><p>[ATTACH=full]11641[/ATTACH]</p><p></p><p>Bas de page (Footer) :</p><p>[ATTACH=full]11642[/ATTACH]</p><p></p><p>Après ceci vous allez réunir tout les calque de chaque groupe (header, footer, body, ect.)et les fusionné tout les calque de chaque groupe</p><p></p><p></p><p></p><p><span style="color: #003366"><strong><em><span style="font-size: 22px">-Images vers Codage</span></em></strong></span></p><p>Une fois votre Webdesign crée nous allons donc nous rendre sur <a href="http://image-maps.com" target="_blank">http://image-maps.com</a></p><p>Cliquez sur Browse Files et sélectionné votre Webdesign, puis cliqué sur start mapping.</p><p>Votre webdesign apparait alors, cliquez sur click to continue</p><p>Maintenant je vous conseillé de dézommé la page pour voir toute votre image.</p><p>Et avec votre souris vous allez faire clique droit puis Create rect et vous allez placé le rectangle a l'endroit ou vous voullez mettre le lien et vous allez par la suite rentrez le lien puis vous faite save.</p><p></p><p>[ATTACH=full]11646[/ATTACH]</p><p></p><p>Une fois ceci fait, vous allez faire clique droit puis Get code. Cliquez ensuite sur l'onglet HTML Code et vous allez avoir un code, laissez le comme sa, on va s'en occupez dans la partie suivante du tutoriel.</p><p></p><p><span style="font-size: 22px"><span style="color: #003366"><em><strong>-Entré le codage dans un fichier HTML</strong></em></span></span></p><p>Une fois que vous avez récupérer votre code, vous allez ouvrir notepad++ et copier collé ceci dedans :</p><p><!--</p><p>Site créer par VOTRE-PSEUDO</p><p>--></p><p><html></p><p><head></p><p><title>LE NOM DE VOTRE SITE</title></p><p><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></p><p></head></p><p><body></p><p></body></p><p></html></p><p></p><p>Une fois ceci fait, vous allez copier le code que vous avez entre les balise <body></body></p><p>Ensuite vous allez enregistrer votre document sous ce nom "index.php"</p><p>[ATTACH=full]11649[/ATTACH]</p><p></p><p><span style="color: #003366"><strong><em><span style="font-size: 22px">-Héberger </span></em></strong></span></p><p>Nous passons donc a l'hébergement de votre site, pour cela il vous faudra le logiciel FileZilla</p><p>Lien de téléchargement :</p><p></p><p>Une fois téléchargé et installé, il va vous falloir prendre un hébergeur. Je vous conseille un hébergeur gratuit pour ce genre de site en image. Allez donc chez craym.eu et cliqué sur plan starter puis suivez les instructions. Une fois inscrit et le plan starter dans vos mains, connecté vous avez l'ip, le nom et le mot de passe donné dans les information sur plan sur Craym :</p><p>[ATTACH=full]11647[/ATTACH]</p><p>et rentrez les comme ceci :</p><p>[ATTACH=full]11645[/ATTACH]</p><p></p><p>Ensuite direction le dossier Public_Html et glissez y le fichier index.html</p><p>Ensuite allez sur votre site et voila <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite171" alt=":D" title="Awesome face :D" loading="lazy" data-shortname=":D" /></p><p></p><p>Ce tutoriel touche donc a sa fin, je rapelle qu'il est destiné au débutant, je ferait un prochain tutoriel expliquant comment créer un site avec HTML 5 et du CSS.</p><p></p><p>Voici ce que donne le site que j'ai réalisé pour le tuto :</p><p><a href="http://info.craym.eu/tutoRG" target="_blank">http://info.craym.eu/tutoRG</a></p><p></p><p>Bonne continuation a vous.</p></blockquote><p></p>
[QUOTE="BEK., post: 2595887, member: 18061"] Salut la commuanuté, Je vous propose encore un nouveaux tutoriel porté sur l'infographie, mais aussi sur les sites internet, plus précisément sur la création de site pour les débutant avec Photoshop. Il faut savoir que ce genre de site ne sont pas vraiment des site, mais plus une image ou l'on ajoute des lien, donc ne vous attendez pas a un site parfait sans bug ou autre. Cela peut ètre utile pour ceux qui veulent ne pas ce cassé la tête a apprendre le codage html, css, php et javascript. Il ne faut que simplement savoir utilisé Photoshop. Dans ce tutoriel je vous apprend a créer la page d'accueil seulement, pour créer d'autre page veuillé repétter l'opération en changeant le design sur photoshop par le design de la page que vous voulez faire. Ce tutoriel va donc consisté à apprendre manier les options de fusion de Photoshop. Vous aurez besoin de notepad++, du moins c'est conseillé. [U][I][B]Sommaire[/B][/I][/U][I][B] :[/B][/I] - Mise en forme de la page sur Photoshop -Image vers Codage -Entré le codage dans un fichier HTML -Héberger [COLOR=#003366][B][I][SIZE=6]-Mise en forme[/SIZE][/I][/B][/COLOR] Pour pouvoir créer un site avec photoshop, il faut déjà le mettre en page et créer son design avec Photoshop. Vous allez donc cliquer sur Fichier puis sur Nouveau et prenez les paramètres suivant : [ATTACH=full]11638[/ATTACH] Après avoir créer sa mise en page, on va s'occupé de créer le design de votre site , je met a disposition l'exemple par étape que j'ai réalisé pour ce tutoriel. Soyez organisé dans la gestion de vos calques comme moi sur les images, cela aide a s'y retrouvé et est important pour la suite du tutoriel, mémorisé l'ordre de création de chaque calque. Bannière (Header) : [ATTACH=full]11639[/ATTACH] Barre de naviguation (Navbar) : [ATTACH=full]11640[/ATTACH] Corp (Body) : [ATTACH=full]11641[/ATTACH] Bas de page (Footer) : [ATTACH=full]11642[/ATTACH] Après ceci vous allez réunir tout les calque de chaque groupe (header, footer, body, ect.)et les fusionné tout les calque de chaque groupe [COLOR=#003366][B][I][SIZE=6]-Images vers Codage[/SIZE][/I][/B][/COLOR] Une fois votre Webdesign crée nous allons donc nous rendre sur [URL]http://image-maps.com[/URL] Cliquez sur Browse Files et sélectionné votre Webdesign, puis cliqué sur start mapping. Votre webdesign apparait alors, cliquez sur click to continue Maintenant je vous conseillé de dézommé la page pour voir toute votre image. Et avec votre souris vous allez faire clique droit puis Create rect et vous allez placé le rectangle a l'endroit ou vous voullez mettre le lien et vous allez par la suite rentrez le lien puis vous faite save. [ATTACH=full]11646[/ATTACH] Une fois ceci fait, vous allez faire clique droit puis Get code. Cliquez ensuite sur l'onglet HTML Code et vous allez avoir un code, laissez le comme sa, on va s'en occupez dans la partie suivante du tutoriel. [SIZE=6][COLOR=#003366][I][B]-Entré le codage dans un fichier HTML[/B][/I][/COLOR][/SIZE] Une fois que vous avez récupérer votre code, vous allez ouvrir notepad++ et copier collé ceci dedans : <!-- Site créer par VOTRE-PSEUDO --> <html> <head> <title>LE NOM DE VOTRE SITE</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> </body> </html> Une fois ceci fait, vous allez copier le code que vous avez entre les balise <body></body> Ensuite vous allez enregistrer votre document sous ce nom "index.php" [ATTACH=full]11649[/ATTACH] [COLOR=#003366][B][I][SIZE=6]-Héberger [/SIZE][/I][/B][/COLOR] Nous passons donc a l'hébergement de votre site, pour cela il vous faudra le logiciel FileZilla Lien de téléchargement : Une fois téléchargé et installé, il va vous falloir prendre un hébergeur. Je vous conseille un hébergeur gratuit pour ce genre de site en image. Allez donc chez craym.eu et cliqué sur plan starter puis suivez les instructions. Une fois inscrit et le plan starter dans vos mains, connecté vous avez l'ip, le nom et le mot de passe donné dans les information sur plan sur Craym : [ATTACH=full]11647[/ATTACH] et rentrez les comme ceci : [ATTACH=full]11645[/ATTACH] Ensuite direction le dossier Public_Html et glissez y le fichier index.html Ensuite allez sur votre site et voila :D Ce tutoriel touche donc a sa fin, je rapelle qu'il est destiné au débutant, je ferait un prochain tutoriel expliquant comment créer un site avec HTML 5 et du CSS. Voici ce que donne le site que j'ai réalisé pour le tuto : [URL]http://info.craym.eu/tutoRG[/URL] Bonne continuation a vous. [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Infographie
Faire un site débutant avec une image sur Photoshop
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut