BEK.
Ancien staff
Il y a Wiix et Jimdo
Faire un site débutant avec une image sur Photoshop
Il y a Wiix et Jimdo
D
deleted395766
Tu utilise quel site pour cree ton site comme dans l'image ? 
BEK.
Ancien staff
Tu utilise quel site pour cree ton site comme dans l'image ?
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
D
deleted395766
nn mais pour cree un forum comme dans ton image pas un site pour upload les images
Super tutoriel. Merci
Je crois que je te connais de la play
ha peut etreJe crois que je te connais de la play
Tres bon tutoriel
Bon tuto, mélange de WYSIWYG et de très bon travail
MerciSalut 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é.
Sommaire :
- Mise en forme de la page sur Photoshop
-Image vers Codage
-Entré le codage dans un fichier HTML
-Héberger
-Mise en forme
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 :
Voir la pièce jointe 11638
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) :
Voir la pièce jointe 11639
Barre de naviguation (Navbar) :
Voir la pièce jointe 11640
Corp (Body) :
Voir la pièce jointe 11641
Bas de page (Footer) :
Voir la pièce jointe 11642
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
-Images vers Codage
Une fois votre Webdesign crée nous allons donc nous rendre surVous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
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.
Voir la pièce jointe 11646
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.
-Entré le codage dans un fichier HTML
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"
Voir la pièce jointe 11649
-Héberger
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 :
Voir la pièce jointe 11647
et rentrez les comme ceci :
Voir la pièce jointe 11645
Ensuite direction le dossier Public_Html et glissez y le fichier index.html
Ensuite allez sur votre site et voila
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 :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Bonne continuation a vous.
