Slices

They are extremely useful!! :) Really, it's a great help to cut your layouts! It cuts your layout and generate a HTML page for you, though I don't recommend you to use it. I don't like how it's coded, but well, you're free to decide. We have our own way to code a layout. Well, why cutting a layout into pieces, instead of putting one big image? It is because it loads faster, and also, it's helpful for frame backgrounds, tables background, etc. In this tutorials, I'll just cut a box... Not a layout but it's the same. I recommend you to use guides before cutting your image into slices...

Les tranches sont très pratiques! Ils vous permettent de couper vos designs. Ça génère aussi une page HTML déjà codée avec votre design mais je ne vous recommande pas de l'utiliser. Je n'aime pas comment c'est codé, mais bon, vous décidez. On a nos propres manières de coder nos designs... Pourquoi couper un design en pièces au lieu de mettre une seule grosse image? Parce que ça permet de charger la page un peu plus vite et c'est pratique si vous utilisez des tables ou des frames. Dans ce tutoriel, je vais juste couper une boîte... Pas un design mais c'est la mmême chose. Je vous recommande d'utiliser des repères avant de couper votre image en tranches!

Once you have finished your layout and saved the psd, flatten your image and put guides as in the picture. The blue lines are the guides. How to make them? Show the rulers (Ctrl + R), click on them and drag to your picture. You will have a little dotted line, and when you release, your guide will appear here.

Une fois que vous avez fini votre design et enregistré le psd, aplatissez l'image et mettez des repères comme sur l'image. Les lignes bleues sont les repères. Comment les faire? Affichez les règles (Ctrl + R), cliquez sur les règles et glissez sur votre image en restant appuyé. Vous verrez une ligne en pointillé et quand vous relacherez, la ligne bleue apparaîtra là où vous avez relaché.

Now, take the slice tool Click on the first corner and drag to make a box that will recover the first little square made by your guides. Repeat this step for all the squares... You will have something like this.

Prenez l'outil tranches Cliquez sur le premier coin et glissez pour faire une boîte qui va recouvrir le premier carré délimité par vos repères. Répétez cette étape pour tous les carrés et vous obtiendrez ceci.

You're done! Now, save for web, go to [ File > Save for web ] (Alt + Shft + Ctrl + S). A big window will appear. (click to enlarge) Select all your slices and modify the properties... For example, if you want to save it in GIF or JPG, etc. I'll leave the default options.

Vous avez fini! Allez à [ Fichier > Enregistrer pour le web ] (Alt + Maj + Ctrl + S). Une grosse fenêtre apparaît (cliquez pour élargir) Sélectionnez toutes vos tranches et changez les paramètres. Par exemple, si vous voulez enregistrer en GIF ou en JPG, etc. Je laisse les paramètres par défaut ici.

It's ok? Now, click on the little arrow near the settings... And click on Edit Output Settings.

Cliquez sur la flèche près des paramètres. Et cliquez sur Modifier les paramètres de sortie.

Another window will pop up.. I'll skip the HTML stuff, given I don't use the page Photoshop will generate. So, go to Saving Files.

Une autre fenêtre apparaît. Je vais sauter les trucs HTML, étant donné que je n'utiliserai pas la page générée par Photoshop. Allez à Enregistrement des fichiers.

You can choose to create a new folder for your pictures. You just need to check Put images in folder and put a folder name. You can edit the files' names output. If you don't need to put too much, put none for the other input. Click OK and back in the big window, click save and choose the directory where you want to save.

Vous pouvez choisir de créer un nouveau dossier pour vos images. Vous avez juste à cocher Dossier de destination des images et mettre un nom pour le dossier. Vous pouvez éditer les noms de fichier de vos images. Si vous n'avez rien à mettre, mettez sans. Cliquez OK et de retour dans la grande fenêtre, cliquez enregistrer. Choisissez le dossier où tous ces fichiers seront enregistrés.

As you can see, the box has been cut.

Comme vous pouvez le voir, la boîte a été coupée.