Como criar um controle deslizante de imagem usando o Photoshop e jQuery

Sem dúvida, o controle deslizante de imagem é um dos elementos mais usados no design da web de negócios, devido ao seu tamanho relativamente grande que é capaz de chamar a atenção do visitante assim que ele chega ao site. Embora a web tenha começado a repensar sobre a usabilidade do controle deslizante de imagem, ela ainda é considerada um aprendizado obrigatório para o recém-chegado da indústria de web design..

Neste tutorial de web design, aprenderemos a criar um controle deslizante de imagem personalizado usando o Photoshop, que você pode visualizar o resultado final aqui. Não apenas vamos ilustrá-lo no Photoshop, mas também o transformaremos em um design funcional, convertendo-o em HTML / CSS e adicionando o jQuery ao seu incrível efeito deslizante..

Parece um monte de coisas complicadas envolvidas, mas na verdade é bastante simples e muito fácil de entender, vamos começar então!

Mais interessado em adotar um slider de imagens e personalizá-lo no caminho? Aqui estão as mensagens dedicadas para você.

Slider de Imagem: 23 jQuery Sliders
Image Slider: 18 Plugins WordPress

Começando

Para este tutorial, você precisará dos seguintes recursos:

26 padrões de pixel repetíveis do PSDfreemium.
biblioteca jQuery
Plugin Nivo Slider
Modernizr
Texturas de papel encontradas de VandelayPremier
(Alternativa) 13 HQ Old Paper Textures from overdosse
Rinjani de Ciaciya
Stupa de Agnes Sim
Tally por Nino Satria
Ofertas de Timo Balk
Uluwatu-Bali por Aris Wjay

Parte I - Design de Slider de Imagem

Etapa 1: configurando o plano de fundo

Comece criando um novo arquivo com tamanho de 1.000 × 700 px. Preencha fundo com cor # efc89e.

Adicionar Pattern Overlay usando o padrão de pixel livre do PSDfreemium.

Etapa 2: base do controle deslizante

Ativar ferramenta de retângulo. Crie um retângulo com tamanho 940 × 450 px. Você pode usar qualquer cor, não importa.

Clique duas vezes na camada para abrir a caixa de diálogo Layer Style. Adicionar sombreamento de estilo de camada, brilho externo e traçado.

Este é o resultado. A base deslizante agora tem um quadro legal com sombra suave por trás.

etapa 3

Adicione uma foto e coloque-a acima da base do controle deslizante. Pressione Ctrl + Alt + G para convertê-lo em Clipping Mask e insira a foto no slider.

Etapa 4: fita

Desenhe uma forma de retângulo com a cor # f4e1ae para ser usada como uma fita.

Clique duas vezes na camada da forma e ative Bevel and Emboss, Gradient Overlay e Pattern Overlay com as seguintes configurações.

Este é o resultado depois de adicionar estilos de camada.

Passo 5

Vamos adicionar textura de papel na fita para torná-lo mais realista. Coloque a textura em cima da forma da fita. Converta-o para Clipping Mask pressionando Ctrl + Alt + G.

Passo 6

Vamos pintar algumas sombras e destaques na fita. Crie uma nova camada acima da faixa de opções. Pinte de preto na parte inferior da fita. Converta-o para Clipping Mask (Ctrl + Alt + G) e reduza sua opacidade para 10%.

Passo 7

Repita o processo anterior para a parte superior da fita. Mas desta vez, adicione destaque pintando branco e depois reduza sua opacidade para 50%.

Etapa 8: Pontos

Ativar ferramenta de lápis. Pressione F5 para abrir a configuração do Brush. Defina o tamanho do pincel para 1 px e aumente o espaçamento até obtermos uma linha pontilhada na área de visualização.

Passo 9

Desenhe uma linha preta de px na parte superior da faixa de opções. Reduza sua opacidade para 20%. Duplique a camada pressionando Ctrl + J. Pressione Ctrl + I para inverter sua cor. Aumentar a opacidade para 50%. Ative a Move Tool e pressione a seta para baixo e a seta para a esquerda uma vez para empurrá-la.

Aqui está o resultado visto em 100% de ampliação.

Passo 10

Repita este processo para desenhar outros pontos no outro lado da fita.

Etapa 11: Adicionar Forma Ornamentada

Defina a cor do primeiro plano para cinza. Use pincel macio com tamanho 1 px para desenhar uma forma ornamentada. Seja criativo, você pode usar qualquer forma que desejar. Ao lado, desenhe uma linha de 1 px e, em seguida, apague sua borda externa usando uma ferramenta de borracha macia. Duplique a linha, vire-a horizontalmente e coloque-a do outro lado.

Passo 12

Selecione todas as camadas ornamentadas e mescle-as em uma camada, pressionando Ctrl + E. Duplicar forma e, em seguida, coloque-a sob a forma original ornamentada. Pressione Ctrl + I para inverter sua cor. Ative a Move Tool e pressione a seta para baixo uma vez para empurrá-la 1 px para baixo.

Etapa 13: informações sobre fotos

Digite os dados da foto dentro da faixa de opções.

Etapa 14: Navegação

Em seguida, vamos desenhar alguns círculos para navegação de slides. Desenhe uma forma de círculo com cor: # 8d877c na parte inferior da faixa de opções.

Adicione Inner Shadow usando as seguintes configurações.

Este é o resultado. O círculo está se transformando em um buraco raso agora.

Etapa 15

Segure Alt e arraste a camada de forma do círculo para duplicá-la.

Passo 16

Vamos definir a condição ativa em um desses links. Selecione um dos círculos e mude sua cor para # bebbb5. Adicionar sombra interna, sobreposição de gradiente e traçado.

17º passo

Segure Ctrl e clique na miniatura da base da faixa de opções no painel Camadas. Crie uma nova camada sob a faixa de opções e preencha-a com preto. Ative a Move Tool e pressione a seta para a esquerda e para baixo algumas vezes.

Passo 18

Suavize-o executando o filtro Gaussian Blur. Clique em Filter> Blur> Gaussian Blur.

19º passo

Coloque a sombra da fita acima da camada do quadro do controle deslizante. Converta-o para Clipping Mask pressionando Ctrl + Alt + G.

20º passo

Reduza a opacidade da sombra para 40%.

21º passo

Pinte a sombra da fita no fundo. Reduza sua opacidade para 20%.

Passo 22

Use a ferramenta Caneta para recuar parte da faixa de opções. Defina sua cor para # b68f63. Coloque-o atrás do controle deslizante.

Este é o resultado visto em 100% de ampliação.

Passo 23

Duplique a forma que acabamos de criar e coloque-a por trás da parte superior da fita. Virá-lo verticalmente.

Etapa 24: Resultado Final no Photoshop

Este é o nosso resultado final no Photoshop. Em seguida, continuaremos a codificá-lo em um slider funcional.

Parte II - Convertendo em HTML / CSS

Passo 25 - Configurando Arquivos

Crie uma nova pasta chamada My-Photo-Slider. Dentro desta pasta, crie um novo documento HTML em branco (index.html), folha de estilo em branco (style.css) e pasta para imagens (img). Também precisamos incluir a biblioteca jQuery e o plugin Nivo Slider na pasta. Como usamos a marcação HTML5, precisamos adicionar um hack do IE para ativar os elementos HTML5 no IE 8 ou inferior. Vamos usar um script chamado Modernizr para acomodar o IE.

Etapa 26 - Marcação HTML básica

Abrir index.html no seu editor de código favorito. Defina a DOCTYPE (usamos HTML5), cabeça elementos (onde adicionamos o título dos documentos e o link CSS e JavaScript (Biblioteca jQuery, Nivo Slider e Modernizr). Também adicionamos um div wrapper (para centralizar o layout), cabeçalho elemento e wrapper de slides.

      Meus slides de fotos

Passo 27 - Slice PSD

Abra o modelo do PSD e retire todas as imagens necessárias. Para a foto, vamos pegar as seguintes imagens do sxc.hu (login necessário, se você ainda não tem uma conta, pode se inscrever gratuitamente). Redimensione todas as imagens para 920 × 430 px. Coloque todas as imagens na pasta de imagens (img).

Rinjani de Ciaciya
Stupa de Agnes Sim
Tally por Nino Satria
Ofertas de Timo Balk
Uluwatu-Bali por Aris Wjay

Etapa 28 - Criar Cabeçalho

Adicione o seguinte código entre

  Meus slides de fotos

Agora vamos adicionar estilo ao cabeçalho. Também adicionamos o estilo para os elementos body e wrapper. Coloque todos os estilos na folha de estilo, style.css.

 / * Basic Styling * / body fundo: url transparente (img / bg.jpg); fonte: 15px / 2 'Adobe Caslon Pro', Geórgia, Serif; margem: 0; preenchimento: 0;  a contorno: 0 nenhum #pagewrap margin: 120px auto; preenchimento: 0; posição: relativa; altura: 100%; largura: 960px;  cabeçalho display: block; flutuar: certo; margem direita: 40px; Largura: 192px; z-index: 52; posição: relativa;  h1 fundo: url transparente (img / separador.png) no-repeat fundo inferior; / * Adicione uma linha de separação abaixo do título * / font-size: 18px; intensidade da fonte: Negrito; altura: 70 px; Altura da linha: 1.1; margem: 55px 10px 0; texto-alinhar: centro; text-transform: maiúscula;

Passo 29 - Adicionar Photo Slider

Agora vamos adicionar código à parte principal do nosso documento, o controle deslizante de foto. Vamos adicionar as fotos primeiro. Coloque o seguinte código entre

Em seguida, adicione a faixa de opções e a legenda das fotos.

 
  Fotógrafo:
 Enrico Nunziati
 Localização:
 Deserto do Namibe
 Modelo:
 Vlei Morto
 Encontro:
 18 de março de 2011 
  Fotógrafo:
 Lina Dhammanari
 Localização:
 Ilha de Lombok, Indonésia
 Modelo:
 Monte Rinjani
 Encontro:
 8 de maio de 2008 
  Fotógrafo:
 Agnes Sim
 Localização:
 Borobudur, Indonésia
 Modelo:
 Big Stupa
 Encontro:
 12 de junho de 2008 
  Fotógrafo:
 Nino Satria
 Localização:
 Taman Safari Indonesia
 Modelo:
 Girafa
 Encontro:
 16 de agosto de 2009 
  Fotógrafo:
 Timo Balk
 Localização:
 Ubud, Bali, Indonésia
 Modelo:
 Ofertas
 Encontro:
 20 de dezembro de 2009 
  Fotógrafo:
 Aris Wjay
 Localização:
 Uluwatu-Bali
 Modelo:
 Linda praia
 Encontro:
 20 de julho de 2011

Agora, se abrirmos index.html no navegador, temos algo assim:

Etapa 30

Ainda precisamos corrigir a aparência do slider usando CSS.

 #slidewrap position: absolute; #slider posição: relativo; altura: auto; largura: 920 px; border: 10px solid #fff; box-shadow: 0 0 5 px # 444; margem: 10px;  .ribbon background: url transparente (img / info-bg.png) sem repetição; altura: 482 px; Largura: 192px; posição: absoluta; direita: 40px; top: -3px; índice z: 50;  #slider img position: absolute; top: 0px; esquerda: 0px; Mostrar nenhum;

É isso que temos agora.

Atualmente, vinculamos o plugin Nivo slider, mas não conectamos o script. Então, vamos ligar o script adicionando essas funções JavaScript entre e elemento.

Passo 31: Estilo Slider

A etapa final é adicionar o estilo do controle deslizante.

 / * Os estilos do Nivo Slider * / .nivoSlider position: relative;  .nivoSlider img position: absolute; top: 0px; esquerda: 0px;  / * Se uma imagem estiver envolvida em um link * / .nivoSlider a.nivo-imageLink position: absolute; top: 0px; esquerda: 0px; largura: 100%; altura: 100%; fronteira: 0; preenchimento: 0; margem: 0; índice z: 6; Mostrar nenhum;  / * As fatias e caixas no Slider * / .nivo-slice display: block; posição: absoluta; índice z: 5; altura: 100%;  .nivo-box display: bloco; posição: absoluta; índice z: 5;  .nivo-directionNav display: nenhum! importante .nivo-html-caption exibição: nenhum;  .nivo-caption posição: absoluta; direita: 20px; texto-alinhar: centro; topo: 130px; Largura: 192px; índice z: 60;  .nivo-caption p margin: 0 .nivo-legenda .title font-style: italic .nivo-controlNav posição: absoluto; fundo: 10px; direita: 20px; altura: 15px; Largura: 192px; texto-alinhar: centro; display: bloco; z-index: 51;  .nivo-controlNav a fundo: url transparente (img / button.png) centro central sem repetição; display: bloco inline; altura: 14px; largura: 14px; recuo de texto: -9999px; cursor: ponteiro;  .nivo-controlNav .active background: URL transparente (img / button_active.png);

Resultado Final + Download

Este é o nosso resultado final, clique aqui para ver a demonstração de trabalho.

Não pode conseguir um certo passo? Aqui está o arquivo PSD do resultado e o projeto completo para você testar e jogar com.

Tutorial de controle deslizante de imagem Arquivo PSD
Projeto completo do tutorial de controle deslizante de imagem