Principes de base du découpage avec Pixelmator

Dans ce didacticiel, je vais vous montrer comment utiliser l’outil Slice dans Pixelmator pour, bien sûr, découper un design à coder dans un site Web fonctionnel. Je vais également vous montrer le processus pas à pas HTML/CSS. À la fin, vous pourrez télécharger les fichiers et les bricoler également.

Étape 1

Ouvrez le Fichier Pixelmator nous avons créé pour notre Tutoriel sur les astuces de l’interface utilisateur.

Étape 2

L’outil que nous utiliserons dans ce tutoriel qui nous permettra de transformer notre design en une page Web est le Outil Tranche (K). Fondamentalement, nous utiliserons cet outil pour sélectionner les zones qui seront enregistrées en tant qu’images. Nous n’aurons pas besoin de l’ensemble du design, juste de quelques parties qui feront partie de l’interface utilisateur (arrière-plan, logo, boutons, captures d’écran).

Étape 3

Avec le Outil Tranche (K) sélectionné, créez une tranche rectangulaire autour du logo comme première tranche. Notez que je n’ai pas inclus le texte à côté car ce sera du texte HTML.

Étape 4

Sélectionnez maintenant l’onglet de la navigation. Essayez d’être très précis lors du découpage de votre site car un seul pixel peut perturber l’alignement plus tard dans la partie HTML.

Étape 5

Ce qui est cool avec l’outil Slice, c’est que nous avons quelques options ; par exemple, si nous découpons une photo, nous pouvons utiliser le JPEG, tandis que pour les éléments de l’interface utilisateur, nous pouvons utiliser le PNG transparent. Vous pouvez également modifier le nom de la tranche ; dans ce cas, mon nom de tranche est « active-tab ».

j’utilise PNG transparents pour les éléments et le logo de l’interface utilisateur, et JPEG pour les captures d’écran.

Étape 6

Continuez à sélectionner les parties du dessin qui doivent être tranchées. Dans la capture d’écran ci-dessous, j’ai créé 2 autres tranches, dont une pour la ligne qui divise le contenu de la fonctionnalité qui sera utilisée deux fois, en haut et en bas de cette section. J’ai également sélectionné la capture d’écran principale.

Étape 7

Ici, sélectionnons une seule capture d’écran, puis nous la répétons dans le HTML, ou vous pouvez enregistrer différentes images plus tard.

Étape 8

Une partie très importante est le fond. Cette tranche devra d’abord être exportée car nous aurons besoin que l’arrière-plan soit actif pour cet élément de l’interface utilisateur ; sinon, il sera transparent.

Étape 9

C’est l’ombre que nous avons dans la section des fonctionnalités, mais je l’ai déplacée vers le bas pour la découper séparément de cette zone ; une fois que vous l’avez exporté, ouvrez le fichier et accédez à Edition > Transformer > Retourner verticalement pour créer l’ombre du bas.

Étape 10

Après avoir créé toutes les tranches et les avoir nommées correctement, parcourez la palette des calques en masquant les calques qui ne sont pas nécessaires : tout le texte et l’arrière-plan. Comme je l’ai mentionné précédemment, la tranche d’arrière-plan devra être réexportée plus tard avec l’arrière-plan actif.

Une fois tous les ajustements effectués, cliquez sur Exporter pour le Web dans l’option Slice Tool. Une boîte de dialogue s’ouvrira vous demandant où vous souhaitez enregistrer les tranches. Créez un nouveau dossier sur votre ordinateur appelé « Site » ; dans ce dossier, créez un autre dossier appelé « imgs ». Sélectionnez le dossier imgs et exportez-y toutes les images.

Étape 11

Si vous avez tout fait correctement, vous aurez des images comme celles illustrées dans l’image ci-dessous.

Étape 12

Cela ne fait pas exactement partie de Pixelmator, mais je vais illustrer les parties HTML et CSS afin que vous puissiez comprendre ce que j’ai fait. Ci-dessous, vous pouvez voir le fichier HTML. Nous utiliserons la balise «