TUTORIAL: Photoshops Slice Tool Pt. Je

Il s'agit de la première moitié d'un suivi de long cours, s'il vous plaît télécharger et décompresser le fichier de photoshop à la base de ce guide à suivre.

Ce tutoriel explique le découpage des images avec Photoshop CS3, les personnes utilisant des versions antérieures de Photoshop mai de ne pas avoir des options ci-dessus, mais devrait encore être en mesure de suivre sans trop d'entraves.

Introduction

Si vous ne l'avez pas entendu, Photoshop a la capacité de couper une seule image en plusieurs images, l'optimisation de chaque pièce séparément, puis écrit son propre code html que les morceaux de ces images de retour dans la même présentation que l'original il est visible sur une navigateur. Je voudrais vous montrer les avantages et les techniques de l'accomplissement de cette tâche. C'est la partie 1 de 2 tutoriels. Ce premier semestre se concentrera sur l'utilisation de l'outil de coupe, tranche et sélectionnez l'outil. Le deuxième semestre se concentre sur l'optimisation de l'épargne et les tranches pour le web.

Qui a besoin de mots Lorsque vous avez Picturebooks? - La préparation du document

Ci-dessous est une simple mise en page pour un site que je vais utiliser tout au long de ce tutoriel pour démontrer l'outil de coupe et les nombreuses options, il est livré avec. Vous pouvez télécharger le fichier. Psd fichier à partir de la fin de ce fil à suivre avec moi.



Avant de nous couper de notre image, nous allons préparer. Allez-y et Désactiver tout texte qui ne fera pas partie de notre page d'images. Ce plan devrait inclure toutes les paragraphes, liens texte, bas de page de texte, etc tout ce qui sera contenu textuel dans les balises html doit être désactivée.

Une bonne idée pour gagner du temps est de mettre l'ensemble de votre contenu textuel dans les couches d'un dossier lors de la conception de votre mise en page comme je l'ai fait. Il ne s'agit pas seulement de gagner du temps, mais également de vos calques agréable et soigné pour que vous puissiez trouver rapidement.

Résultat:


Pour éteindre votre texte couches, il vous suffit de cliquer sur le petit oeil à côté d'eux dans les couches de palettes.

La plume est plus puissante que l'épée - Utilisation de l'outil Slice

Maintenant que notre image est prête pour le découpage, nous allons jeter un coup d'oeil à notre outil de coupe. Allez-y et appuyez sur Maj + C, ou pour les utilisateurs mac option + c. Vous mai à appuyer deux fois pour accéder à l'outil de coupe. Le curseur de votre souris devrait ressembler à la pointe d'un couteau exacto. Ceci, mes amis, est l'outil de coupe, et il est très utile pour le site internet mise en page des maquettes.

Avant de commencer à l'utiliser, il ya quelques choses que vous devriez prendre connaissance de. Allez-y et de regard sur les outils à votre menu, vous verrez que l'outil de coupe est situé dans la première section, comme un élément dans le sous-menu de l'outil de recadrage. Placez votre souris sur l'icône d'outil tranche dans le menu Outils, jusqu'à ce que votre voir menu à la volée. Assurez-vous d'avoir sélectionné l'outil de tranche et non la tranche de sélectionner l'outil.



Enfin, le moment est venu de commencer à réduire notre image. Allez-y et cliquez sur le coin supérieur gauche de l'un des onglets de la barre de navigation, puis faites glisser votre curseur vers le bas à droite de cette même onglet comme illustré ci-dessous:

La paresse, Let Photoshop Do It For You! - Mode Auto Tranches et Tranches

Félicitations mon ami, que vous venez de créer votre première "tranche utilisateur." Chaque fois que vous faites glisser votre curseur pour créer une tranche, cette pièce est appelée "tranche utilisateur. «Si vous remarquez, dans le coin supérieur gauche de votre part, vous avez le numéro 3. Vous voyez, quand Photoshop écrit les balises html qui organise votre tranches, on utilise un tableau HTML. Le chiffre 3 indique que cette tranche sera la 3ème cellule de ce tableau.

Notez qu'il ya 4 autres tranches qui entourent la vôtre, qui sont numérotés 1, 2, 4 et 5. Ceux-ci sont appelés «auto tranches. "Auto tranches sont automatiquement générées par Photoshop et représentent le reste des cellules de tableau que Photoshop se produire quand il crée votre balisage. Observez que les auto tranches sont dissociés de l'utilisateur par tranches de leurs numéros de gris au lieu de bleu.
Let's aller de l'avant et terminer le reste de la barre de navigation à onglets. Rendez-vous à votre menu d'outils, de retour dans ce menu voler où vous avez trouvé votre outil de tranche, et cette fois, choisissez votre "outil de sélection Slice. "Cet outil, au lieu de couper votre image, choisissez plutôt des tranches qui existent déjà. Allez-y et appuyez sur ctrl + alt (commande + option sur un mac), puis cliquez et faites glisser le morceau d'utilisateur que vous avez créé précédemment à l'onglet suivant dans la barre de navigation. Comme vous pouvez le voir, nous avons juste copié notre première tranche de l'utilisateur.

Bien que nous ayons notre part de sélectionner l'outil à portée de main, aller de l'avant et de zoom à votre nom d'utilisateur et les tranches de s'assurer qu'ils s'alignent avec l'onglet frontières correctement. S'ils ne le font pas, il suffit de sélectionner celle qui doit être ajusté, et faites glisser le petit bout, situé dans le centre de chaque frontière dans la direction appropriée.

Aller de l'avant et continuer de copier les morceaux jusqu'à ce que vous avez une tranche pour chaque onglet dans la barre de navigation. Lorsque vous avez terminé, vous devriez arriver à quelque chose comme ceci:

Comment exquisément Laminiferous - Layer Based Tranches

Je dois le dire, vous faites fantastique, mais nous avons un problème. Notre logo est scindé en deux!



Hmm, comment devrions-nous maintenant résoudre ce problème? Je sais ce que tu penses, il suffit de le couper avec l'outil tranche. Eh bien, on pourrait le faire, mais je veux un peu plus de rigueur quand il s'agit de l'emblème. Nous allons créer une «couche à base slice." Allez-y et cliquez sur le "Logo" calque pour le sélectionner, puis dans la barre de menu choisissez Calque> Nouveau calque Based Slice. Voila, nous avons juste le logo maintenant encapsulées dans un "Layer Based Slice" automatiquement.

Couche à base tranches d'un peu d'avantages et des inconvénients. Je vais aller de l'avant et en dresser la liste ici:
Avantages:

• C'est précisément autour de la boite d'une couche
• S'ajustent automatiquement à toutes les transformations de la couche (y compris le redimensionnement, déplacement, etc )

Inconvénients:

• Ne sont pas modifiable manuellement
• Ne sont pas bien adaptés pour les animations qui vont de la couche d'une grande distance
• Vous ne pouvez pas copier une couche à base d'une autre tranche de la zone

Nous allons créer une autre couche à base de trancher le pied de page en sélectionnant le calque d'arrière-plan dans le dossier et le pied de page en choisissant "nouvelle couche fondée sur la tranche "de la couche de menu dans la barre de menu.

Allez-y et essayez-vous à créer une autre couche à base de la tranche de la bannière en sélectionnant le calque d'arrière-plan. L'ensemble de la bannière doit être une seule tranche. Uh oh! Que s'est-il passé? Apparaît notly la couche s'étend vers le haut et dans notre tête.



C'est probablement à cause de l'ombre que l'application de la couche. Je n'ai pas vraiment envie de la couche rastériser styles, mais je ne peux pas redimensionner la tranche, car c'est une couche de style . Je suppose que nous devrons changer pour un autre type de tranche

Photoshop Gets A Raise - Promouvoir Tranches

Photoshop ne pas vous forcer à s'en tenir à ce type de morceau que vous avez. Prenez votre outil de sélection de la tranche et à regarder les options de la barre. "Promouvoir" vous permet de changer d'auto ou de la tranche d'une couche à base tranche à un utilisateur tranche. Cliquez sur le bouton pour changer de promouvoir la bannière d'un utilisateur tranche tranche et à l'avis que la tranche des bords ont maintenant en face de leurs centres de redimensionnement. Let's pull la bordure supérieure au juste sous l'en-tête de notre présentation. Bien fait, je pense que la bannière est fait.

Voir ci-dessous l'auto tranche la bannière qui remplit la moitié inférieure de la page? Cliquez avec le bouton droit sur celle-ci avec votre tranche ou tranche de sélectionner l'outil et cliquez sur "diviser tranche". Une boîte de dialogue s'affiche qui vous permet de diviser la tranche horizontalement ou verticalement, autant de fois que vous le souhaitez. Nous voulons partager cette tranche de 2 fois verticalement et horizontalement, afin de vérifier chaque case et tapez "2" à côté de chaque bouton radio qui dit "uniformément espacés", puis cliquez sur OK. Nous avons tout à l'heure que deux choses à la fois: nous avons divisé la tranche auto en 4 tranches distinctes, et aussi de les promouvoir à l'utilisateur tranches.

Severing The Ties That Bind-nous - Division et combinaison de tranches

Maintenant, on peut faire glisser la ligne horizontale qui divise les deux tranches de deux heures et en bas jusqu'à ce qu'elle se divise également entre les zones de texte sur le droit du corps, et de déplacer la ligne verticale un peu plus près les symboles.



Maintenant nous avons un grand espace sur la gauche qui a besoin d'être une seule cellule du tableau. Cliquez sur la moitié supérieure de la grande zone et maintenez la touche MAJ enfoncée tout en cliquant sur la moitié inférieure. Nous venons maintenant sélectionné plusieurs tranches. Choix multiples tranches à la fois vous permet d'affecter les deux tranches à la fois, que ce soit le redimensionnement de la frontière entre eux, de les copier, les divisant, ou dans ce cas de les combiner. Cliquez avec le bouton droit sur l'un des deux tranches que vous venez de sélectionner et de choisir "Combine Slices" dans le menu.

Are We There Yet? No. Are We There Yet? N ° ... Sommes-nous - Préparation Pour Enregistrer

Félicitations, nous avons fait le découpage de notre image. Enfin, nous pouvons donner à chaque tranche d'une identité, et de lui donner quelques trucs à raconter Photoshop comment écrire le balisage.

Cliquez avec le bouton droit sur la tranche qui entoure le logo et choisir "Modifier Slice Options" dans le menu. Une boîte de dialogue s'affiche qui vous permet de modifier un peu les propriétés de l'image. Donnez-lui le nom de "Logo". N'importe quel nom, nous définissons dans cette boîte de dialogue pour chaque tranche correspond à ce que Photoshop nom le fichier de l'image lorsque l'on mettre les tranches pour le web. En d'autres termes, nous avons nommé cette tranche "Logo", le fichier de la tranche sera nommé "Logo". D'autres options existent ici comme URL, Target, un message texte, et Alt Tag. Chacun de ces affecte Photoshop écrira ses attributs dans la balise de marquage. Nous allons donner le logo d'une URL de "index.html" de sorte que lorsque l'utilisateur clique sur le logo, ils sont portés à la page d'accueil. Ensuite, tapez "MILLIgreat. com "dans la zone Alt tags, ce qui indique à Photoshop pour générer un attribut alt de la balise d'image avec" MILLIgreat.com "que son contenu. Cliquez sur OK pour enregistrer les modifications à cette tranche.



Maintenant, comment nous avons mis en place sur notre barre de navigation? Dans la palette Calques, sélectionnez les "liens" sous-dossier dans votre dossier de tête et tourner sur la visibilité pour le "texte" dossier. Nous allons l'utiliser comme un guide pour l'ajout de contenu à nos onglets. Double cliquez sur le bouton "Home" dans l'onglet de la barre de navigation de notre présentation. Cela va ouvrir notre «Modifier Slice Options" de dialogue. Nom de cette tranche de "Home" et cliquez sur OK. Remplissez le reste de la barre de navigation avec ce motif, en nommant chaque tranche correspondant à son texte. Lorsque vous avez terminé, mettez votre lien texte repartir et de continuer de nommer votre tranches jusqu'au bas de page. Votre tranche nom définitif devrait être en relation avec ce que contient la tranche, et être aussi courte que possible.

Quand vous arrivez au pied de page, nous allons faire quelque chose d'un peu différent car c'est une couleur unie. Double-cliquez sur ce lien pour ouvrir votre "Edit Slice Options" de dialogue. Dans le cadre de la "tranche de type" menu déroulant, choisissez «Pas d'image." Photoshop Cela dit de ne pas enregistrer cette image, mais encore de générer la marge de la cellule de tableau. Lorsque vous choisissez "Aucune image" sur le contenu de votre boîte de dialogue a changé d'avoir une boîte de texte multiligne demande pour le texte qui sera affiché dans la boîte. Saisissez toutes les informations que vous souhaitez, par exemple, j'ai choisi "© Copyright 2009 Voltec Design." Au bas de la boîte de dialogue est une option de choisir une couleur de fond. Choisissez "Autres ..." dans le menu déroulant et utiliser votre outil Pipette pour sélectionner la couleur dans le pied de page de votre mise en page. Quand Photoshop crée les balises pour les bas de votre cellule, il va maintenant afficher le contenu textuel que vous avez fourni à partir de Photoshop, et de définir la couleur d'arrière-plan des cellules de la couleur que vous venez de choisir. Cliquez sur OK.

Conclusion

Well done, nous avons enfin terminé la première moitié de l'utilisation de la tranche. Vous savez maintenant comment utiliser l'outil tranche, la tranche de sélectionner l'outil, la façon de modifier les propriétés de la tranche, et les différents types de tranches. Malheureusement, vous avez seulement appris à utiliser l'outil de la tranche, mais pas pourquoi. Si vous avez le temps, et doivent le savoir-faire, jetez un coup d'oeil à la partie II de ce tutoriel où j'explique la façon dont la tranche outil peut mettre d'énormes quantités de temps pour les concepteurs de sites Web au cours de rédaction par le biais de l'option "Enregistrer pour le Web et Devices "Dialog.

Youve fait un bon travail de votre tutoriel. J'ai vérifié il pour confirmer que je le fais correctement et dans sa ligne.
Une suggestion: Son très facile de se retrouver avec des tranches de 1 px qui rend brouillon lorsque vous publiez en html j'ai toujours vérifier que le nombre de tranches sont tous dans l'ordre. A 1px tranche est trop petite pour le nombre de montrer, si vous passez par votre tranches de 1 - que ce soit, vous savez que vous avez une tranche supplémentaire si vous passez un certain nombre. Il suffit de zoomer pour le trouver et à se débarrasser de lui.

J'ai une question si, depuis IE8 est venu dans mon site web, qui a été fait en utilisant toutes les tranches, la recherche ne soit plus transparente. Je constate que je peux faire une réparation temporaire pour des raisons de compatibilité, mais j'ai besoin de le corriger si elle est homogène et il est donc ne pas apparaître seulement compatibles, mais est compatible. Ainsi...avez-vous rencontrer avec vos tranches et, si oui, que faites-vous?

Merci