Share
Actualización: Codificación tut ahora disponible! Hoy vamos a explicarle cómo crear su propio "control deslizante con pestañas jugoso". Esta es una excelente manera de agregar más profundidad y dimensionalidad a sus propios diseños, y es la solución perfecta para un control deslizante de imagen.!
Actualización de codificación: ¡Ahora puedes tomar la parte de codificación completa de este tutorial en Nettuts! Ustedes preguntaron, y así recibís :)
Y ahora, para todos los que quieran un juego por juego, aquí está la versión completa escrita del tutorial. Notará leves cambios en el video (el video se realiza sobre la marcha), pero las mismas técnicas básicas se aplican a ambos tutoriales.
La imagen utilizada para la demostración es un fondo de pantalla exclusivo de Envato Marketplace de reAdactor. Puedes encontrar más de estas imágenes de fondo de pantalla aquí!
Vamos a comenzar en nuestro documento de 600x400 px. He agregado un fondo gris claro con un patrón de cuadrícula sutil para que podamos ver nuestro elemento emerger del documento un poco mejor a medida que lo creamos..
Comience por dibujar un rectángulo simple (aproximadamente 450x270 px) en la mesa de trabajo. Agregaremos un trazo muy ligero alrededor del rectángulo a través del panel de opciones de capa (Stroke = 1px Outside, # c8c8c8). ¿La razón por la que estamos agregando este trazo es para agregar un poco de separación entre nuestro marco y el fondo? Esto será especialmente importante si está trabajando en un fondo blanco..
A continuación, comenzaremos nuestra "sombra" debajo del marco. Comience simplemente agarrando su herramienta de Pincel básico y establezca el Tamaño en 40% y la Dureza en 0%. Comienza una nueva capa, luego mantén presionada la tecla Mayús (para mantener tu línea recta) y dibuja una línea corta (aproximadamente la mitad del ancho de nuestro marco). ¿Conseguir esto perfecto no importa? Estaremos ajustando el tamaño usando la herramienta de transformación en los siguientes pasos.
Ahora giremos la capa recién cepillada MUY ligeramente; El ángulo que utilicé era de 2.5, pero puedes meterte con él solo. Cuanto más profundo sea el ángulo, más "inclinada" se verá la sombra más adelante. Puedes usar Rotar o Transformación libre (Ctrl + T) para hacer el truco.
Duplique el primer pincel en la capa "sombra" (Ctrl + J) y luego gírelo horizontalmente (Edición> Transformar> Girar horizontal). El resultado debe ser una sombra que sea opuesta a la primera..
Mueva ambas capas de sombra detrás de la capa "marco" y escálelas (seleccione ambas capas y presione Ctrl + T) para que encajen dentro del ancho total del rectángulo del marco.
Finalmente, combine ambas capas de sombra juntas (Ctrl + E) y empuje la capa de sombra en el lugar correcto (use la herramienta de selección básica [V] y use el teclado para empujar). También puede ajustar la opacidad de la capa de sombra para adaptarse a sus preferencias personales. Usé aproximadamente el 50%, puedes hacer más o menos según lo que buscas.
Paso Bonus: Si lo desea, puede jugar con la sombra aún más usando estas técnicas básicas más el filtro "Desenfoque de Gaussion". Cuanto más borrosa sea la sombra, más dispersa aparecerá. También puedes jugar con la forma en que la sombra se desvía con la herramienta de deformación.
Bien, ahora tenemos nuestro fondo básico y nuestra sombra. El siguiente paso es crear la capa de "imagen" interna. Haga esto creando un nuevo rectángulo (usando el mismo estilo de capa de trazo que el primero) o simplemente duplique la capa original y use la herramienta Convertir punto para empujar en cada lado aproximadamente 10px.
Obviamente, puede ajustar el espaciado de acuerdo con sus propias preferencias. Cuanto más espacio, más grande aparecerá el relleno de tu marco más adelante. También puede agregar un gran relleno inferior para ahorrar espacio para el título y la descripción de una imagen..
A continuación, suelte la imagen que desea usar en el documento (puede arrastrarla desde una carpeta o usar la herramienta Importar). Querrá escalar y colocar la imagen sobre la capa de forma de "Imagen interna", y luego hacer que su imagen sea una Máscara de recorte sobre la misma capa de forma interna. Puede hacer que sea una máscara de recorte haciendo clic derecho en la capa de imagen y presionando "Crear máscara de recorte".
Agregue una sombra interior clara utilizando el panel Estilos de capa (haga doble clic en la capa de forma). La demo utiliza la siguiente configuración:
Nuevamente, este es un caso en el que puede jugar con el efecto para obtener los resultados que desea. Una sombra más oscura hará que la imagen parezca más dramática y profunda. Una sombra más clara (o ninguna sombra) hará que la imagen se vea más plana..
Whallah!
Los botones con pestañas Izquierda y Derecha en el lateral son parte del atractivo principal de este tipo de control deslizante porque se rompen un poco fuera del marco y crean una forma más interesante para nuestro control deslizante.
Comience dibujando un círculo (mantenga presionada la tecla Mayús para mantenerlo como un círculo perfecto cuando use la herramienta Elipse). El tamaño debe ser de aproximadamente 60 píxeles (puede mirar el panel de información mientras dibuja el círculo para ver el tamaño que se muestra en el texto).
A continuación, agregue un trazo de 1px con el mismo color que usamos para el marco de fondo.
Como beneficio adicional: agregue una sombra ligera para imitar la sombra que dibujamos debajo del marco. La sombra que usamos fue aproximadamente un 15% de opacidad, distancia 3 y tamaño 4. El ángulo debe reflejar nuestra fuente de luz en el centro del cuadro, por lo que en este caso es de aproximadamente 130 grados.
Ahora agrega nuestras flechas. Puedes usar una forma de Photoshop normal o una versión de texto ">>" de las flechas con tu fuente favorita. Incluso puedes dibujar el tuyo en Illustrator si prefieres obtener una forma realmente única. En nuestro caso usamos ">>" usando la fuente Lucida Sans..
A continuación, agrupe la capa Forma de círculo y la capa Flecha seleccionando ambas y presionando Ctrl + G.
Ahora dibuja una máscara sobre el grupo para que parezca que solo está superponiendo nuestro marco. Para hacer esto: Dibuje una selección de Marquesina rectangular, luego presione el botón "Agregar máscara de capa" cuando haya seleccionado la carpeta de grupo.
Lo mejor de esta máscara de "grupo" es que también enmascara todos los estilos de capa. Si intentáramos simplemente enmascarar el círculo mismo, el trazo y la sombra también se recortarían, haciéndolos visibles sobre el marco (que no queremos).
Por último, simplemente duplique el grupo de botones y gírelo horizontalmente. Lo moveremos a la posición del lado izquierdo del documento. El único consejo real aquí es que también deberemos ajustar el ángulo de la sombra paralela a unos 50 grados para que coincida con nuestra fuente de luz en el centro del cuadro. Asegúrese de desactivar el selector de luz global para asegurarse de no ajustar la otra sombra.
El último elemento de este control deslizante es el pequeño "módulo de botón circular" que mostrará cuántas imágenes tiene en su diapositiva..
Comience por crear un círculo de 13px simple (nuevamente, mantenga presionada la tecla Mayús para que sea perfecto). Queremos agregar otro trazo de 1px alrededor del exterior utilizando el mismo color que todos los trazos anteriores (# c8c8c8 para la demostración).
Por último, agregue un degradado muy sutil sobre el círculo (gris claro [# D9D9D9] mezclando a blanco en la parte superior). Puede ajustar el color del degradado según sus preferencias, pero la idea aquí es hacer que el círculo se sienta más como un botón que el usuario puede presionar.
Duplique el círculo original un par de veces más y muévalos hacia un lado (debe tener tantos círculos como imágenes tenga en la diapositiva).
Esos círculos son terriblemente difíciles de ver ahora? así que vamos a agregar un fondo para que sean un poco más visibles en imágenes claras.
Comience dibujando un rectángulo redondeado con un radio de 10px (puede ajustar el radio a sus propios deseos). A continuación, ajuste el relleno al 50% para que se vea ligeramente.
Por último, establezca un Trazo 2px (# a7a7a7) con una opacidad de alrededor del 50% para hacerlo también transparente. El efecto final debe ser un rectángulo redondeado transparente con un borde sutil.
¡Último paso! Agregue un círculo más pequeño sobre uno de los círculos originales y colóquelo en el centro. Ajuste el color (puede usar un degradado o un color sólido) para adaptarlo a sus propios colores de marca. Notará que en la demostración, usamos los mismos colores que usamos en el logotipo de Webdesigntuts.
¡Excelente trabajo! Ahora que tiene la configuración básica del control deslizante, puede ajustar fácilmente el tamaño para adaptarse a sus propios proyectos. También puede cambiar la piel para usar fondos de diferentes colores, botones rediseñados o incluso agregar texturas al marco mismo. El límite depende realmente de usted, solo tenga en cuenta los principios básicos que configuramos aquí y lo hará bien..
Accentsconagua