TUTORIAL: Photoshop Slice Tool Pt. II

Introduction

Bienvenue à la PARTIE II de tranches de Photoshop! Si vous n'avez pas lu la première partie, puis je vous suggère de le faire le plus de ce tutoriel suppose que vous avez, et redémarrer à partir duquel nous nous sommes arrêtés au premier semestre. Si vous souhaitez lire la Partie I, vous pouvez le trouver ici . N'oubliez pas de télécharger le fichier zip et extraire le PSD pour que vous puissiez travailler avec moi pendant que je vous enseigne tout sur les tranches et le "Enregistrer pour le Web & Devices" boîte de dialogue.

Au secours, je suis tombé et je ne peux Dial Up - Enregistrer pour le Web

Droit Ouvrons la Bible de l'endroit où nous nous sommes arrêtés plus tôt:



Enfin nous l'avons faite, la mettre de dialogue Web. C'est là toute la magie se produit. Lorsque les tranches ne sont pas liés par le document dans lequel ils résident, et peut errer librement sous forme de fichiers individuels. C'est également là que Photoshop crée un ensemble de balises HTML pour votre mise en page, insérer du texte, des images et des couleurs de fond, ainsi que l'optimisation de chaque image individuellement.

L'optimisation de la raison est important, c'est parce que nous voulons que notre page à charge dans un délai raisonnable. Pensez à un dial-up utilisateur qui tente de visiter votre site et combien de temps ils devront attendre un non compressé, non optimisée de l'image à télécharger pour les visionner. Pour un site complexe, cela peut prendre de 2 minutes à 2 heures! Let's make it facile pour eux en rendant nos fichiers image un peu plus petits afin qu'ils se chargent rapidement.

Prenez un moment pour vous familiariser avec l'interface, en prenant note des différentes parties:

• L'option d'affichage (onglets en haut)
• La boîte à outils sur le côté gauche du graphique,
• L'optimisation de l'image ronde sur l'extrême droite
• Le panneau de prévisualisation en bas

Ce que nous allons nous concentrer sur la mise en place est notre l'utilisateur et les tranches de la couche d'optimisation et de "reliance" quelques tranches ensemble. D'examiner de près dans le coin supérieur gauche de l'une des tranches de l'automobile, voir le petit symbole qui sorte de l'air d'un "s" ou un "8"? Il s'agit en fait deux liens chaîne, et il déclare que cette palette tranches »de couleur correspond à la tranche adjacente. Reliant les tranches de Photoshop permet de faire correspondre les palettes de couleurs ou des changements d'optimisation de deux ou plusieurs tranches adjacentes.

Voyez comment il ya un gradient appliqué à l'arrière-plan des zones de texte plus petite dans le corps? Il ya une chance que lorsque l'on comprime la tranche autour du symbole et la tranche dans le reste de la zone, c'est qu'il va y avoir une couture "entre les deux images quand ils sont remis ensemble dans le balisage. Pour éviter cela, nous allons lier les couches de sorte qu'ils aient des couleurs assorties, où ils avoisinent.

Dans votre Enregistrer pour le Web boîte de dialogue, sélectionnez la tranche qui entoure le symbole sur le dessus de la zone de texte de droite. Maintenant, maintenez la touche Maj enfoncée et cliquez sur la tranche à la droite immédiate. Maintenant que vous avez sélectionné 2 tranches, regardez à votre panneau de l'optimisation.

Juste à côté du titre de "Preset" section, il ya une petite icône qui comporte une flèche vers le bas et un certain nombre de lignes horizontales. Cliquez sur cette icône et choisissez "Tranches Link" dans le menu qui s'affiche.

Les symboles dans le coin supérieur gauche de vos tranches apparaissent maintenant comme une autre couleur pour indiquer qu'ils sont liés. Faites la même chose pour les 2 tranches juste en dessous de ceux que vous venez liés. Ces tranches de change pour une nouvelle couleur aussi. Maintenant, nous pouvons être sûrs que les gradients dans les deux paires de coupes liées correspondent à leurs paires respectives.



Choisir une tranche de l'une des paires et de changer ses préréglage "Moyen jpeg". Jetons un coup d'oeil de plus près les différences entre ce que l'aspect original prédéfinies telles, et ce que la prévisualisation du fichier enregistré ressemble. Dans les onglets de votre écran, choisissez la troisième dans la liste intitulée "2-Up." Cela nous permet de voir à la fois l'image originale, non compressé ou optimisés, ainsi que la optimisées et compressées avant-première. Un zoom à la tranche, nous travaillons sur et jetez un œil à travers le symbole de l'image optimisée de prévisualisation.

Je vois un peu d'artefacts ici afin que nous allons le niveau de qualité prédéfini de 30 à 50 environ. Vous trouverez ce dans le domaine de l'optimisation dans la section prédéfinis où nous avons changé de «JPEG Medium." 50 semble correcte, seuls quelques petits artefacts vu maintenant, et de se débarrasser de ceux que nous pouvons utiliser le flou de la fonctionnalité, intégrée à la zone du tableau même. Réglez le flou à propos de 0. 15 à se débarrasser du reste des artefacts.

Appliquer les mêmes étapes pour la prochaine série de tranches liées, nous avons créé jusqu'à ce que vous êtes satisfait des résultats.

La raison pour laquelle nous avons utilisé la compression JPEG est ici parce qu'il avait un dégradé de plusieurs couleurs. Toute fois, nous avons un morceau avec beaucoup de variations de teinte ou de saturation de son mieux pour utiliser le format JPEG car il comprime les images complexes mieux qu'un format qui détiennent une palette de couleurs tels que des fichiers GIF ou PNG.

Maintenant, sélectionnez la zone élargie à la gauche des symboles où nous avons l'intention de mettre le contenu textuel principal de la page. Ici nous avons une grande quantité d'espace blanc et 2 dégradés très fines qui se déplacent d'un gris à un gris clair. Bien qu'il n'y ait pas beaucoup de couleurs en cause ici, c'est une image plus grande et donc jpeg nouveau sera le mieux. Utilisez votre propre discrétion pour optimiser cette tranche en format JPEG jusqu'à ce que vous pensez qu'elle est correcte. Lorsque vous avez terminé, optimiser la bannière et le logo aussi.

Passons le long des onglets de navigation. Comme ils se ressemblent tous, nous allons les lier afin que nous n'avons besoin que d'optimiser un seul et laisser le reste assumer la même optimisation. Utilisation de l'outil de sélection tranche de notre boîte à outils, cliquez sur l'onglet de navigation d'abord et puis maintenez la touche MAJ enfoncée tout en sélectionnant le reste.

Lien vers les onglets de navigation, puis sélectionnez l'un d'eux de travailler avec et zoomer près d'elle. Ici nous avons une petite tranche, avec surtout une couleur unie à l'exception du peu de couleurs dans la zone où les coins arrondir. Compte tenu de ces paramètres, nous pouvons supposer que le mieux serait de les optimiser en tant que fichiers GIF. À partir du menu preset menu déroulant dans notre palette d'optimisation, choisissez "GIF 32 No-Dither." Définir les "couleurs" aux alentours de 8. Au bas de la "Optimized" fenêtre affiche quelques informations sur notre dossier.

Notez la taille du fichier de l'image en moins de 1Ko. C'est pourquoi nous utilisons des GIF au lieu de JPEG lorsqu'il s'agit de petites images et les couleurs de quelques-uns.

N'oublions pas de terminer l'optimisation off en sélectionnant toutes les tranches d'automobiles dans notre mise en page et les mettre en "JPEG Medium", puis en définissant la qualité à environ 60 et le flou à 0,2.

Si vous souhaitez vous pouvez prévisualiser le produit fini en cliquant sur le bouton "Aperçu" dans votre panneau de prévisualisation en bas de la boîte de dialogue. Je vous recommande personnellement de ce à vous assurer de ne pas montrer tout semble en place et êtes satisfait de vos fichiers JPEG avant d'enregistrer les fichiers. Si vous voyez des problèmes, retournez à Photoshop, sélectionnez la tranche échéant, et de l'ajuster à votre convenance.

Enfin, nous sommes prêts à enregistrer les fichiers et créer nos balises HTML. Dans votre "Enregistrer pour le Web" boîte de dialogue, cliquez sur le bouton "Enregistrer" dans le coin inférieur droit. Tapez "index" Enregistrer sous dans votre champ de saisie, et choisissez "HTML et images" à partir du menu déroulant en dessous. Dans les "tranches" du menu déroulant, choisissez "Toutes les tranches". Cliquez sur OK.

Conclusion

Nous avons appris aujourd'hui tellement! L'outil de tranche est très puissante et souvent négligé. Il existe de nombreuses options concernés qui peuvent sauver une énorme quantité de temps. Maintenant que vous savez comment tranche de vos images et de les optimiser pour le web, vous pouvez utiliser les tranches pour réaliser et mettre en œuvre un schéma qui réside dans votre imagination, et ensuite utiliser Photoshop pour commencer le balisage pour votre mise en page. Great job passer à travers ce tutorial et j'espère que vous serez en mesure de l'utiliser à votre avantage dans votre carrière en design web.

PS Il ya beaucoup plus d'options dans la boîte de dialogue Enregistrer pour le Web que je n'ai pas parcouru, mais je voulais que vous retrouvez la convivialité de la façon d'utiliser le populaire mettre de l'option Web. Attendez-moi d'ajouter à ce tutoriel dans le futur