Cómo crear un control deslizante de imagen con Photoshop y jQuery

Sin lugar a dudas, el control deslizante de imágenes es uno de los elementos más utilizados en el diseño web de negocios, debido a su tamaño relativamente grande que puede atraer la atención del visitante una vez que llega al sitio. Aunque la web ha comenzado a replantearse acerca de la usabilidad del control deslizante de la imagen, todavía se considera un aprendizaje obligatorio para los recién llegados a la industria del diseño web..

En este tutorial de diseño web, aprenderemos a crear un control deslizante de imagen personalizado arriba utilizando Photoshop, desde donde puede obtener una vista previa del resultado final. No solo lo ilustraremos en Photoshop, sino que lo convertiremos en un diseño funcional al convertirlo en HTML / CSS y agregar jQuery por su impresionante efecto deslizante..

Suena como un montón de partes complicadas involucradas, pero de hecho es bastante sencillo y muy fácil de entender, comencemos entonces!

¿Más interesado en adoptar un control deslizante de imagen y personalizarlo en el camino? Aquí hay publicaciones dedicadas para ti..

• Control deslizante de imagen: 23 controles deslizantes jQuery
• Control deslizante de imagen: 18 complementos de WordPress

Empezando

Para este tutorial necesitarás los siguientes recursos:

• 26 patrones de píxeles repetibles de PSDfreemium.
• biblioteca jQuery
• Plugin Nivo Slider
• Modernizar
• Texturas de papel encontradas de VandelayPremier
• (Alternativo) 13 HQ Texturas antiguas de papel de una sobredosis
• Rinjani por Ciaciya
• Estupa de agnes sim
• Tally de Nino Satria
• Ofrendas de Timo Balk
• Uluwatu-Bali por Aris Wjay

Parte I - Diseño de control deslizante de imagen

Paso 1: Configuración de fondo

Comience por crear un nuevo archivo con un tamaño de 1000 × 700 px. Rellene el fondo con el color # efc89e.

Agregue la Superposición de patrón utilizando el patrón de píxeles libres de PSDfreemium.

Paso 2: Base deslizante

Activar la herramienta Rectángulo. Crear un rectángulo con tamaño 940 × 450 px. Puedes usar cualquier color, no importa.

Haga doble clic en la capa para abrir el cuadro de diálogo Estilo de capa. Agregar sombra de estilo de capa, brillo externo y trazo.

Este es el resultado. La base del deslizador ahora tiene un bonito marco con una suave sombra detrás.

Paso 3

Agregue una foto y colóquela sobre la base del deslizador. Presione Ctrl + Alt + G para convertirlo en máscara de recorte e inserte la foto en el control deslizante.

Paso 4: Cinta

Dibuja una forma de rectángulo con el color # f4e1ae para usar como una cinta.

Haga doble clic en la capa de la forma y active Biselado y relieve, Superposición de degradado y Superposición de patrón con la siguiente configuración.

Este es el resultado después de agregar estilos de capa..

Paso 5

Añadamos textura de papel a la cinta para que sea más realista. Coloque la textura encima de la forma de la cinta. Conviértalo en Máscara de recorte presionando Ctrl + Alt + G.

Paso 6

Vamos a pintar algunas sombras y luces en la cinta. Crear nueva capa por encima de la cinta. Pintar negro en la parte inferior de la cinta. Conviértalo en Máscara de recorte (Ctrl + Alt + G) y luego reduzca su Opacidad al 10%..

Paso 7

Repita el proceso anterior en la parte superior de la cinta. Pero esta vez, agregue resalte pintando de blanco y luego reduzca su opacidad al 50%..

Paso 8: Puntadas

Activar la herramienta de lápiz. Pulsa F5 para abrir la configuración del pincel. Establezca el tamaño del pincel en 1 px y aumente el espacio hasta que tengamos una línea de puntos en el área de vista previa.

Paso 9

Dibuja 1 px línea negra en la parte superior de la cinta. Reducir su opacidad al 20%. Duplique la capa presionando Ctrl + J. Presione Ctrl + I para invertir su color. Incrementa la opacidad al 50%. Active la herramienta Mover y luego presione la flecha hacia abajo y la flecha hacia la izquierda una vez para empujarla.

Aquí está el resultado visto al 100% de ampliación.

Paso 10

Repita este proceso para dibujar otras puntadas en otro lado de la cinta.

Paso 11: Añadir forma ornamentada

Establecer el color de primer plano a gris. Use un pincel suave de tamaño 1 px para dibujar una forma ornamentada. Sé creativo, puedes usar cualquier forma que te guste. Junto a él, dibuje una línea de 1 px y luego borre su borde exterior con una herramienta de borrador suave. Duplique la línea, gírela horizontalmente y colóquela en el otro lado.

Paso 12

Seleccione todas las capas ornamentales y combínelas en una capa presionando Ctrl + E. Duplicar forma y luego colóquela debajo de la forma original adornada. Pulsa Ctrl + I para invertir su color. Active la herramienta Mover y luego presione la flecha hacia abajo una vez para empujarla 1 px hacia abajo.

Paso 13: Información de la foto

Escribe los datos de la foto dentro de la cinta.

Paso 14: Navegación

A continuación, vamos a dibujar algunos círculos para la navegación de diapositivas. Dibuje una forma de círculo con color: # 8d877c en la parte inferior de la cinta.

Agregue la sombra interna usando las siguientes configuraciones.

Este es el resultado. El círculo se está convirtiendo en un agujero poco profundo ahora.

Paso 15

Mantenga presionada la tecla Alt y luego arrastre la capa de forma de círculo para duplicarla.

Paso 16

Vamos a establecer la condición activa en uno de estos enlaces. Seleccione uno de los círculos y cambie su color a # bebbb5. Añadir sombra interna, superposición de degradado y trazo.

Paso 17

Mantenga presionada la tecla Ctrl y luego haga clic en la miniatura de la base de la cinta en el Panel de capas. Crea una nueva capa debajo de la cinta y rellénala con negro. Activa la herramienta Mover y pulsa la flecha hacia la izquierda y hacia abajo unas cuantas veces.

Paso 18

Suavizar mediante la realización de filtro de desenfoque gaussiano. Haga clic en Filtro> Desenfoque> Desenfoque gaussiano.

Paso 19

Coloque la sombra de la cinta sobre la capa del marco del deslizador. Conviértalo en Máscara de recorte presionando Ctrl + Alt + G.

Paso 20

Reducir la opacidad de la sombra al 40%..

Paso 21

Pintar la sombra de la cinta en el fondo. Reducir su opacidad al 20%..

Paso 22

Utilice la herramienta Pluma para extraer parte de la cinta. Establece su color en # b68f63. Colócalo detrás del deslizador.

Este es el resultado visto al 100% de ampliación..

Paso 23

Duplique la forma que acabamos de crear y colóquela detrás de la parte superior de la cinta. Voltearlo verticalmente.

Paso 24: Resultado Final en Photoshop

Este es nuestro resultado final en Photoshop. A continuación, continuaremos codificándolo en un control deslizante funcional.

Parte II - Convertir en HTML / CSS

Paso 25 - Configuración de archivos

Crear una nueva carpeta llamada My-Photo-Slider. Dentro de esta carpeta, cree un nuevo documento HTML en blanco (index.html), hoja de estilo en blanco (style.css), y carpeta de imágenes (img). También debemos incluir la biblioteca jQuery y el complemento Nivo Slider en la carpeta. A medida que usamos el marcado HTML5, necesitamos agregar un truco de IE para habilitar elementos HTML5 en IE 8 o inferior. Usaremos un script llamado Modernizr para acomodar IE.

Paso 26 - Marcado HTML básico

Abierto index.html en tu editor de código favorito. Definir el DOCTYPE (Utilizamos HTML5), cabeza Elementos (donde agregamos el título de los documentos y vinculamos CSS y JavaScript (jQuery Library, Nivo Slider y Modernizr). También agregamos un div envoltura (para centrar el diseño), encabezamiento elemento, y deslice la envoltura.

Paso 27 - Rebanada PSD

Abra la maqueta de PSD y corte todas las imágenes necesarias. Para la foto, tomemos las siguientes fotos de sxc.hu (es necesario iniciar sesión, si aún no tiene una cuenta, puede registrarse gratis). Cambiar el tamaño de todas las imágenes a 920 × 430 px. Pon todas las imágenes en la carpeta de imágenes (img).

1. Rinjani por Ciaciya
2. Estupa de agnes sim
3. Tally de Nino Satria
4. Ofrendas de Timo Balk
5. Uluwatu-Bali por Aris Wjay

Paso 28 - Crear encabezado

Agregue estos siguientes códigos entre

y

.

 
 Mis diapositivas de fotos 
 

Ahora vamos a añadir estilo al encabezado. También añadimos el estilo para los elementos de cuerpo y envoltura. Pon todos los estilos en la hoja de estilo, style.css.

 / * Estilo básico * / cuerpo fondo: url transparente (img / bg.jpg); fuente: 15px / 2 'Adobe Caslon Pro', Georgia, Serif; margen: 0; relleno: 0;  a esquema: 0 ninguno #pagewrap margen: 120px auto; relleno: 0; posición: relativa; altura: 100%; ancho: 960px;  header display: block; flotar derecho; margen derecho: 40px; ancho: 192px; índice z: 52; posición: relativa;  h1 fondo: url transparente (img / separator.png) parte inferior central sin repetición; / * Agrega una línea separadora debajo del título * / font-size: 18px; font-weight: negrita; altura: 70px; altura de la línea: 1.1; margen: 55px 10px 0; text-align: center; transformar texto: mayúsculas;  

Paso 29 - Añadir foto deslizante

Ahora vamos a agregar código a la parte principal de nuestro documento, el deslizador de fotos. Vamos a añadir las fotos primero. Coloque estos siguientes códigos entre

.

Y luego agrega la cinta y el título para las fotos..

 
 
 Fotógrafo:
 Enrico Nunziati
 Ubicación:
 Desierto de Namib
 Modelo:
 Vlei muerto
 Fecha:
 Mar 18, 2011 
 
 Fotógrafo:
 Lina Dhammanari
 Ubicación:
 Isla Lombok, Indonesia
 Modelo:
 Monte Rinjani
 Fecha:
 8 de mayo de 2008 
 
 Fotógrafo:
 Agnes sim
 Ubicación:
 Borobudur, Indonesia
 Modelo:
 Estupa grande
 Fecha:
 12 de junio de 2008 
 
 Fotógrafo:
 Nino satria
 Ubicación:
 Taman Safari Indonesia
 Modelo:
 Tally Jirafa
 Fecha:
 16 de agosto de 2009 
 
 Fotógrafo:
 Timo Balk
 Ubicación:
 Ubud, Bali, Indonesia
 Modelo:
 Ofrendas
 Fecha:
 Dic 20, 2009 
 
 Fotógrafo:
 Aris Wjay
 Ubicación:
 Uluwatu-Bali
 Modelo:
 Hermosa playa
 Fecha:
 20 de julio de 2011 
 

Ahora, si abrimos index.html En el navegador, tenemos algo como esto:

Paso 30

Todavía tenemos que arreglar la apariencia del deslizador usando CSS.

 #slidewrap position: absolute; #slider position: relative; altura: auto; ancho: 920px; borde: 10px sólido #fff; caja de sombra: 0 0 5px # 444; margen: 10px;  .ribbon fondo: url transparente (img / info-bg.png) no-repetir; altura: 482px; ancho: 192px; posición: absoluta; derecha: 40px; arriba: -3px; índice z: 50;  #slider img position: absolute; arriba: 0px; izquierda: 0px; pantalla: ninguna;  

Esto es lo que tenemos ahora..

Actualmente, hemos vinculado el complemento de control deslizante de Nivo, pero no hemos conectado el script. Entonces conectemos el script agregando estas funciones de JavaScript entre y elemento.

Paso 31: Estilo del deslizador

El último paso es agregar el estilo del control deslizante.

 / * Los estilos del control deslizante de Nivo * / .nivoSlider position: relative;  .nivoSlider img posición: absoluta; arriba: 0px; izquierda: 0px;  / * Si una imagen está envuelta en un enlace * / .nivoSlider a.nivo-imageLink position: absolute; arriba: 0px; izquierda: 0px; ancho: 100%; altura: 100%; borde: 0; relleno: 0; margen: 0; índice z: 6; pantalla: ninguna;  / * Los cortes y cuadros en el Control deslizante * / .nivo-slice display: block; posición: absoluta; índice z: 5; altura: 100%;  .nivo-box display: block; posición: absoluta; índice z: 5;  .nivo-directionNav display: none! important .nivo-html-caption display: none;  .nivo-caption posición: absoluta; derecha: 20px; text-align: center; arriba: 130px; ancho: 192px; índice z: 60;  .nivo-caption p margin: 0 .nivo-caption .title font-style: italic .nivo-controlNav position: absolute; abajo: 10px; derecha: 20px; altura: 15px; ancho: 192px; text-align: center; bloqueo de pantalla; índice z: 51;  .nivo-controlNav a fondo: url transparente (img / button.png) centro central sin repetición; pantalla: bloque en línea; altura: 14px; ancho: 14px; texto-sangría: -9999px; cursor: puntero;  .nivo-controlNav .active fondo: url transparente (img / button_active.png);  

Resultado final + Descargar

Este es nuestro resultado final, haga clic aquí para ver la demostración de trabajo..

¿No se puede lograr cierto paso? Aquí están los resultados del archivo PSD y el proyecto completo para que lo pruebes y juegues con.

• Archivo PSD Tutorial de Control de Imagen
• Image Slider Tutorial Proyecto Completo