ptlb-formation à Poitiers

Tutoriels de formation
pour les infographistes débutants et avancés

Stratégie et conception de site Internet - partie 08

Création d'un site internet avec Photoshop
 
Retour au sommaire des vidéos -  Vidéogramme suivant ...

Regarder « Création d'un site internet avec Photoshop » sur youtube
Consultez notre choix de formations sur PTLB-Formation.fr

Un site internet avec Photoshop ou Illustrator

Nous allons voir très rapidement comment réaliser une page Internet avec Photoshop ou Illustrator.

Pour simplifier la démarche, j’ai fait une copie d’écran du site actuel.

Sur le disque dur, j’ai créé un dossier qui se nomme Photoshop. À l’intérieur de ce dossier, j’ai créé un nouveau dossier qui se nomme « éléments préparatoires » dans lesquels j’ai placé la copie d’écran du site Internet « ptlb-formation ».

Nous allons importer cette copie d’écran dans Photoshop afin d’effectuer certaines transformations et obtenir du code html.

Dans Photoshop, menu « fichier », commande « ouvrir ».

Je sélectionne la copie d’écran qui se trouve dans le dossier « éléments préparatoires » du dossier « Photoshop »

La copie d’écran du site Internet est affichée dans Photoshop.

Pratiquement en haut de la barre des outils se trouve l’outil de recadrage.

Les tranches de Photoshop

En laissant le bouton de la souris appuyé, il est possible de voir de nouvelles commandes qui concernent les tranches.

Le premier outil se nomme « outil tranche » et le deuxième outil se nomme « outil de sélection de tranches ».

L’outil tranche permet de trancher cette image en un groupe d’images. Ce groupe d’images sera reconstitué dans un fichier « html ». En principe, il est nécessaire de réaliser des tranches pour chaque forme graphique, chaque icône, chaque texte, etc.

Des tranches au HTML

Cette opération peut donc prendre un certain temps. Ici, ce qui nous intéresse c’est de voir la reconstitution html.

C’est pourquoi nous allons simplement réaliser que quelques tranches.

Je commence par réaliser la première tranche sur le haut de la page.

La seconde tranche englobera le texte « Formation à la carte : PAO, Web Multimédia… » ainsi que les trois lignes qui se trouvent ci-dessous.

Pour la suite de notre présentation, la troisième tranche englobera les pictogrammes ainsi que le texte et le menu.

La quatrième tranche englobera l’ensemble des formations proposées.

Et la cinquième tranche correspondra au pied de page.

Avec l’outil de sélection de tranches, je peux « double-cliquer » sur, par exemple, la première tranche qui se trouve tout en haut.

Une fenêtre s’affiche permettant d’intervenir sur toutes sortes d’options : création d’un lien et de sa cible, écriture de la balise « Alt ». La réponse sera concrète pour Google.

Ici, nous n’allons pas renseigner les champs, donc cliquons sur « OK ».

Toujours avec l’outil sélection de tranches, doubles cliquons sur la tranche numéro 2.

En haut de la fenêtre, une rubrique se nomme « type de tranches ».

En cliquant sur le petit chevron, nous choisirons l’option « pas d’image ». La fenêtre se transforme et permet d’inscrire du texte. Ici nous copierons le texte qui correspond au remplacement de l’image. C’est-à-dire « Formation à la carte : PAO, Web, Multimédia ... etc. »

Je valide mon choix en cliquant sur « OK »

Exportation : images et html

Maintenant, il s’agit d’exporter cette page au format html.

Dans le menu « fichier », j’utilise la commande « exportation » puis la commande « enregistrer pour le Web (héritées) ».

Ici, nous ne rentrerons pas dans le détail du « type d’image » et notamment de la notion « d’optimisation ».

En bas de la fenêtre se trouve la commande « enregistrer ». Celle-ci n’est pas visible dans le vidéogramme en raison de sa taille.

Je clique sur le bouton « enregistrer » et je sélectionne le format « html et images ».

Il est nécessaire de placer ces fichiers dans le répertoire qui se nomme « Photoshop » du disque dur.

Je nomme mon fichier « index » et je prends soin de sélectionner « html et images » dans la rubrique « format ».

Ensuite, il me suffit de cliquer sur « enregistrer ».

Après quelques instants, l’ensemble des fichiers nécessaires à la création de cette page sont inscrits sur le disque dur.

Allons dans « Fillezilla ».

Remontons dans l’arborescence de « Filezilla » afin d’apercevoir le dossier « Photoshop ».

En double-cliquant sur le dossier « Photoshop » du disque dur, il est possible de découvrir le fichier « index.html » accompagné d’un dossier qui se nomme « images ». Ainsi, Photoshop a généré ce fichier et ce dossier.

Le dossier nommé « elements-preparatoires », vous vous en souvenez avait été créés en amont.

Doubles cliquons sur le dossier « images » afin d’en voir son contenu. Le nom des images est issus du nom du fichier html, c’est-à-dire que le mot « index » est affublé d’un numéro.

Vous noterez que l’image « index_02.jpg » n’existe pas. En effet, c’est la tranche « numéro 2 » ou nous avons remplacé l’image par du texte.

Il nous suffit maintenant de copier le répertoire Photoshop sur le serveur distant en procédant comme les autres fois.

Après cette manipulation, je retourne dans le navigateur.

Dans l’adresse Internet, je remplace le mot « word » par « photoshop ».

Le site paraît être organisé comme le vrai site Internet.

Seule la tranche « numéro 2 » possède du texte au kilomètre. Vous l’aurez compris, pour modifier ce texte au kilomètre il est nécessaire d’avoir quelques notions de html 5 et de CSS 3.

Nous avons réalisé cette démonstration dans « Photoshop », mais il est possible de faire exactement la même chose dans « Illustrator ». D’ailleurs, Illustrator paraît plus adapté à la création d’interfaces de site Web. Néanmoins le principe des tranches reste le même.

Nous avons vu qu’il est possible de réaliser un site Internet de façon extrêmement basique avec le bloc-notes, il est également possible d’améliorer la présentation et l’interactivité avec « Word ». Photoshop et Illustrator possèdent quelques arguments, pour la gestion de la qualité créative et pour le référencement notamment des images.

Le référencement auprès de Google

Ici, certains diront c’est parfait, j’ai ce qu’il me faut. En effet, nous avons compris que le référencement auprès de Google impose une connaissance du langage html.

Dans un grand nombre d’activités, le site Internet n’a pas besoin d’être référencé par Google. En effet, c’est l’entreprise qui donne l’adresse Internet à son prospect via n’importe quel moyen de communication. Ainsi le prospect peut parcourir les pages à son gré à la recherche d’une information ou d’une présentation spécifique.

Pour les entreprises qui désirent être référencées par Google, ceux-ci doivent trouver des solutions pour répondre aux critères « in-page » imposées par le moteur de recherche.

C’est donc un réel problème de communiquer sur Internet sans connaissance de html 5 et de CSS 3, c’est pourquoi Adobe a inventé une solution qui fonctionne un peu comme « Word » ou plus exactement comme « Indesign ». C’est-à-dire qu’il est possible de réaliser un site Internet sans programmation avec la possibilité d’obtenir un référencement naturel de qualité.

Voir la suite sur le vidéogramme suivant ...

Pierre Tomy Le Boucher