Banner Tutoriais Photoshop

Tutorial Anterior: Como usar a Pencil Tool ou Ferramenta Lápis. | Página Inicial »
Tutorial Anterior: Números do 1º Semestre do Tutoriais Phoshop. | Página Inicial »
Tutorial Anterior: Venha ser um colaborador do ::Tutoriais Photoshop:... | Página Inicial »
Tutorial Anterior: Como usar a Gradient Tool ou Ferramenta Degradê. | Página Inicial »
Tutorial Anterior: Como usar a Paint Bucket Tool ou Ferramenta Lata d... | Página Inicial »
Tutorial Anterior: Como usar a Crop Tool ou Ferramenta Corte Demarcad... | Página Inicial »
Tutorial Anterior: Como usar a Magic Wand ou Ferramenta Varinha Mágic... | Página Inicial »
Tutorial Anterior: Como usar a Lasso Tool ou Ferramenta Laço. | Página Inicial »
Tutorial Anterior: Pintura com Catchup e Batatas Fritas. | Página Inicial »

quinta-feira, 3 de maio de 2007

Como usar a Slice Tool ou Ferramenta Fatia.


Vote no Tutoriais Photoshop para o Top Blog 2010

Hoje vamos falar da Slice Tool ou Ferramenta Fatia, clicando nela temos como opção secundária a Slice Select Tool ou Ferramenta Seleção de Fatia que também será explicada, pois uma ferramenta trabalha em conjunto com a outra. A Slice Tool é uma ferramenta que fatia a imagem em quadrados ou retângulos que serão salvos como arquivos separados, é frequentemente usada em sites que precisam carregar imagens de forma rápida.

Slice Tool - Ferramenta Fatia

Tecla de atalho: Letra K do teclado

Antes de começar vamos falar dos quatro tipos de slices que existem:

User-slices - São criados usando a Slice Tool e desenhando o slice como é feito com a Marquee Tool, pode ser identificado pela linha que cria ao redor da imagem.

Layer-based slices - É criado automáticamente indo em Layer> New Layer Based Slice, pode ser identificado pela linha que cria ao redor da imagem.

Auto-slices - São criados automáticamente para compensar as áreas escolhidas para o Slice, pode ser identificado pela linha pontilhada, podem ser movidos e redimensionados com a Slice Select Tool.

Sub-slice - São criados quando se cria um novo Slice sobre um Slice já existente, pode ser identificado pela linha pontilhada.

Todos os Slices são numerados da esquerda para a direita de cima para baixo, os números se mudam de posição caso os Slices mudem de posição, para tivar ou desativar a visão dos Slices vá em View> Show> Slices.

Layer-based e Auto Slices podem ser convertidos para User Slices, para isso basta clicar com o botão direito usando a Slice Tool e escolher Promote to User Slice.



A barra de opções da Slice Tool mostra algumas opções já conhecidas e outras nem tanto, mas vamos a elas.

Slice Tool Presets

Ao lado do ícone da ferramenta na barra de opções temos uma pequena seta, que, se for clicada oferece a opção de salvarmos as preferencias da ferramenta, para isto basta clicar no ícone de novo documento do lado direito da caixa.

Style

A caixa Style dá a opção de escolher como seus slices serão desenhados.

Normal - você pode clicar e arrastar criando slices com a forma que achar melhor.

Fixed Aspect Ratio - você clica e arrasta e seu slice manterá a proporção definida por você.

Fixed Size - tamanho fixo para os slices criados, que podem ser definidos por você.



A barra de opções da Slice Select Tool nos apresenta quatro ícones distintos que servem para modificar a ordem de empilhamento dos Slices caso exista um sobreposto a outro em sua imagem, da esquerda para a direita os ícones são Bring to Front, Bring Forward, Send Backward e Send to Back.



Ao clicar em slice options a caixa acima abrirá, ela só será util caso você queira abrir sua imagem fatiada em um arquivo Html, caso contrario não será de grande utilidade, mas vamos as opções da caixa Slice Options.

Slice Type

Aqui temos duas opções, Image e No Image, escolhemos No Image caso não tenhamos estados rollover para nossos slices, e na opção Image temos os seguintes campos.

Name - um nome qualquer para seu slice

URL - um endereço de internet para onde seu slice irá redirecionar quem clicar nele.

Target - como seu endereço de internet irá abrir, pode ser _blank (para abrir em outra página), _parent (para abrir na mesma página) etc.

Message Text - o texto que irá aparecer caso sua imagem não carregue.

Alt Tag - o texto que irá aparecer quando o mouse estiver sobre o slice.

Depois temos as dimensões do slice e o slice background type, que serve para definir a cor de background de nosso slice, caso a opção seja none ele terá um background transparente.

Participe deixando seu comentário, dúvida, sugestão, ideias, exemplos ou simplesmente dizendo um "Olá!" na parte de comentários deste Post, sua participação é extremamente importante para o blog e também para todos os leitores que posteriormente terão acesso aos tutoriais e matérias que oferecemos por aqui.

Caso não queira ficar de fora das atualizações diárias do blog você tem 3 opções bem práticas:

  • Siga-me no Twitter.
  • Cadastre-se e receba por e-mail o resumo diário do que foi postado aqui no blog.
  • Cadastre nosso endereço RSS para receber as atualizações via leitor de Feeds.
  • Obrigado por ter votado no ::Tutoriais Photoshop:: para o iBest e Peixe Grande 2008 e 2009!

    Até a próxima!!



    7 Comentários:

    Às 16 de outubro de 2008 21h56min00s BRT , Anonymous Anônimo disse...

    oi, e como eu salvo os slices como modelo para ser usado em outra imagem com o fatiamento identico? Tipo, fatiei uma e imagem e quero fatiar outra exatamente igual, como eu salvo os slices para ser usado na próxima imagem?

     
    Às 16 de outubro de 2008 21h58min00s BRT , Anonymous Anônimo disse...

    Há... por favor se souber a resposta acima me avise nesse e-mail: sergiovillard@ig.com.br

     
    Às 17 de dezembro de 2008 10h25min00s BRST , Anonymous Anônimo disse...

    como editar essas fotos no html?

     
    Às 30 de junho de 2009 23h57min00s BRT , Anonymous Anônimo disse...

    Boa noite.
    Olha, eu consegui fazer 3 slices em uma única imagem, porém, não consigo hospeda-la em formato de HTML...como posso hospeda-la, para coloca-la em meu site?
    Obrigada.

     
    Às 2 de setembro de 2009 18h13min00s BRT , Anonymous Anônimo disse...

    André, eu também queria saber como salvar o fatiamento pra aplicá-lo em outro lugar... me manda um e-mail: igor_cnn@hotmail.com

     
    Às 17 de setembro de 2009 03h03min00s BRT , Anonymous taurusfoz disse...

    Para salvar em HTML, vai em
    "File > Save For Web (defina suas opçoes e salve)"
    "Arquivo > Salvar Para Web (defina suas opçoes e salve)"

     
    Às 17 de março de 2010 11h45min00s BRT , Anonymous Anônimo disse...

    Desculpe, mas esta bem explicada a forma de aplicar a ferramenta, porém o principal não foi explicado, como SALVAR as fatias????

     

    Postar um comentário

    Assinar Postar comentários [Atom]

    Links para esta postagem:

    Criar um link

    << Início