() translation by (you can also view the original English article)
En este tutorial voy a tomar un vistazo a exactamente cómo funcionan los filtros de Instagram, antes recreando efectos similares en Photoshop. Yo voy también se presentación de algunas interesantes nuevas propiedades CSS que nos permitirá crear filtros de tipo Instagram directamente en el navegador.
Hay un montón de aplicaciones de foto de época en el mercado de Hipstamatic para cámara + pero en gran medida la más conocida de todas estas aplicaciones es Instagram; uno de los jugadores originales que lanzó en septiembre de 2010. Tres meses después, en diciembre había firmado encima de más 1 millón de usuarios.
Esta oleada en renombre más tarde lo llevó a ser adquirido por Facebook por un divulgado $ 1 billón. No está mal para una pequeña startup de 13 personas.
Instagram filtros de trabajo
Instagram tiene una variedad de filtros diferentes para elegir, que van desde 'Lumo-fi' a 'Nashville'. Todo lo cual se crean usando una variedad de métodos, filtros y efectos. Kevin Systrom, cofundador de Instagram añade a esto:
Realmente es una combinación de un montón de diferentes métodos. En algunos casos que dibujamos encima de imágenes, en otros lo hacemos matemáticas pixel. Realmente depende del efecto que vamos para. Por ejemplo, Lomo-fi realmente no es mucho más que la imagen con su contraste.
La imagen siguiente muestra los distintos efectos utilizados por Instagram de filtros:
Aunque cada filtro tiene diferentes ajustes, dependiendo del tipo de efecto el proceso actual para la mayoría de ellos puede dividirse en seis pasos:
1. ajuste
El ajuste de color y tono es probablemente uno de los pasos más importantes que distingue a cada filtro. Mucho de las características de cada filtro puede lograrse niveles diverso ajuste.
2. profundidad de campo
Profundidad de campo puede definirse como "la distancia entre los objetos más cercanos y más lejanos en una escena que aparecen aceptablemente sharp en una imagen". Si estás más acostumbrado a trabajar en diseño gráfico en comparación con la fotografía probablemente la reconocerás como la broca en primer plano que aparece fuerte y crujiente y la broca en el fondo que aparece borrosa.
Centrándose la patata a la inglesa/sharp poco sobre el tema que estás fotografiando y tener los alrededores borrosos, ayuda a llamar la atención a la zona que quiera destacar.
La imagen de arriba ilustra un buen ejemplo de profundidad de campo. La planta en primer plano aparece en foco mientras que el fondo está fuera de foco y aparece borroso.
3. lente llamarada/película Burn
En algunos filtros de Instagram añade una capa extra que suele ser un desenfoque de lente de la llamarada o de la película. Añadiendo estos puede añadir un poco de factor sorpresa añadida a la imagen. Sin embargo, éstos se deben utilizar con sensatez que el demasiado énfasis en la quemadura de destello de la película lente a veces pueden hacer el efecto general cutre y chapucera.
Echar un vistazo a esta selección de las llamaradas de la lente, que añadir al efecto estilo vintage:
4. vieja película efecto rayas
Para agregar un grano de estilo vintage a una imagen y darle una sensación anticuada, se utiliza una textura del recubrimiento. Estos pueden variar de los arañazos de la película real al ruido generado. Ruido se produce cuando usted consigue variación nivel de píxeles en los valores de color que reducen la claridad de una imagen. Ruidos de estática generada por ordenador es un ejemplo extremo de ruido.
5. viñeta
Una vez que los ajustes, la profundidad de campo y el ruido se han añadido a la imagen, se coloca una viñeta en la parte superior, una vez más a centrar la atención en el contenido principal de la imagen. Una viñeta es una técnica utilizada en fotografía que reduce la saturación hacia los bordes de la imagen o el brillo de una imagen.
6. Añadir un marco
Finalmente, se agrega un marco para agregar ese extra retro-ness a la imagen. Los marcos son a menudo lo que podría haber visto en viejos carretes de marco o las imágenes originales de estilo polaroid. También puede actuar como bordes erosionados o rotos que añadir a ese sentimiento de la imagen es una foto auténtica de la época.
Los filtros de Instagram generalmente comienzan su vida en Photoshop. Desde allí entonces están programadas en objetivo C como parte del fundador de la Instragrams de aplicación nativa para el iPhone amplía esto:.
Nuestros filtros son una combinación de efectos – perfiles de la curva, mezclar modos, tonalidades de color, etcetera. De hecho, suelen crearlos en Photoshop antes de crear los algoritmos para hacer en el teléfono.
Recreación de Instagram filtros en Photoshop
Esto es lo que se va creando - usted puede ver el antes y después de efectos de la adición de nuestros filtros de estilo Instagram:
Paso 1: Crear el lienzo
Empezar por crear un lienzo cuadrado 600x600px y darle un color de fondo. He elegido usar la nativa Instagram azul para mi fondo. Pegar en la imagen solicitada a la lona, luego cambiar el tamaño y recortar la imagen si es necesario.
Paso 2: Ajustar el Color
Ahora es el momento para hacer el color y el ajuste tonal de la imagen. Para ello, 'Imagen' en el menú superior y seleccionar ajustes > curvas. A continuación se presentará con un pop-up cuadro donde puede cambiar estos valores.
Empezar por aumentar los niveles de verdes. Cambiar la salida de '30', por ejemplo. Su imagen ahora debe mirar un poco más verde. También aumentaremos el azul en la imagen. Cambiar la salida azul '100'. Su imagen ahora debería verse bastante lavada.
Tenga en cuenta que al cambiar estos ajustes se puede jugar hasta conseguir el efecto deseado de tu foto. Una vez hecho esto, duplicar la imagen que acaba de crear. Puede hacer esto haciendo clic derecho sobre la capa de imagen y seleccionando "Duplicar capa".
Paso 3: Crear la profundidad de campo
Con la capa duplicada seleccionada, vaya a filtro > Desenfoque > Desenfoque gaussiano, aumentar el 'radio' a 5px y haga clic en 'Aceptar'. Ahora toma la herramienta marco circular y dibujar un círculo alrededor del área de la fotografía que desea estar en foco.
Una vez que ha hecho que ir a capa > Máscara de capa > Ocultar selección. Ahora debería haber creado un círculo de máscara de capa de la imagen borrosa.
En el panel de capas, ir a la máscara de capa, pulse 'alt' y haga clic en la máscara de capa. Tu lienzo debería cambiar ahora a la máscara de capa. Ir a filtro > Desenfoque > gaussiano Desenfocar y desenfoque la máscara por 30px. Ahora esto debe crear el efecto de profundidad de campo con el objeto de su foto en foco y el fondo desenfocado.
Paso 4: Grabar película y destello de lente
Echa un vistazo en imágenes de Google u otros sitios de stock de imagen para una selección de lente quemaduras de llamarada y película. Haber elegido la quemadura/de la llamarada o ambos entonces puedes superponerlos encima de la original, ajuste el modo de mezcla de la quemadura de la película 'Superponer' o de otro modo como 'Pantalla'. Una vez más, experimentar con estos a ver que mejor adapte a tu foto...
Las llamaradas de la lente pueden también lograrse nativamente en Photoshop yendo a filtros > Render >Len flare... y especificando su efecto deseado.
Paso 5: Crear los arañazos de la película
Añadir algunos arañazos de la película, o crear su propio ruido por ir a filtro > ruido > Añadir ruido luego jugando con los modos de fusión para conseguir el efecto deseado.
En este caso he decidido establecer mi imagen común 'Multiplicar' y han bajado la opacidad al 14%
Paso 6: Creación de la viñeta
Estamos casi al final de crear el efecto de filtro de estilo Instagram. Antes de que suceda sólo necesitamos añadir los toques finales. Para crear la viñeta, añadir una nueva capa y rellene con un negro sólido. Luego tomar la herramienta marco circular y dibujar una forma ovalada grande en el centro de la imagen con los bordes del óvalo casi tocando los lados de la imagen.
Corta la selección del recuadro del negro presionando la tecla 'SUPR'. Luego, una vez más ir a filtro > Desenfoque > Gaussian Desenfocar y Desenfocar la capa de la viñeta. Retocar la viñeta para asegurarse de que los lados de él son completamente negros y no un desenfoque transparente. Una vez hecho esto, en consecuencia a reducir la opacidad. He bajado mina al 63%
Paso 8: Añadir el marco
La parte final es añadir el marco. He decidido de añadir una vieja mirada de rollo película usando una combinación de creación de un perímetro rectangular de la imagen y con números, letras y flechas de algunas imágenes de archivo de carretes de película.
También puede crear algunos interesantes rasgado efectos descargando algunos arrancado photoshop pinceles y utilizando la herramienta de máscara de capa con éstos.
... Y cómo puede recrear Instagram filtros estilo Photoshop. Ahora pasemos a crear con CSS.
Traducción de filtros de Instagram para la Web
Aunque yo no diría que recreando los filtros nativos de Instagram en CSS es actualmente posible, ha habido algunas introducciones al mundo de la CSS hace poco que se lo que es casi posible. Jugando con estas propiedades es posible crear efectos similares con un poco de experimentación.
Voy a presentarles a algunos de los que esperamos que le ayude a comenzar y en su camino.
Filtros
Actualmente los navegadores webkit único basado en apoyan esta propiedad, aunque con un poco de suerte se llevará a cabo en todos los navegadores modernos pronto. Filtros dan la posibilidad de añadir efectos al estilo Photoshop para cualquier imagen a través del poder del CSS. Los filtros son las siguientes:
- Desenfoque
- Escala de grises
- Sepia
- Brillo
- Saturación
- Gira de Hue
- Contraste
- Invertir
Aunque alguno de los efectos anteriores podría venir útil para este tipo de cosas, voy a buscar a las dos que será más eficaz cuando emular imágenes de estilo Instagram. Para más información sobre el marcado para el uso de estas propiedades puede sacar este post de blog de filtros de CSS3.
Contraste
El contraste es la diferencia de color y la luz entre partes de una imagen. Aumentando esto a menudo puede conducir a una imagen más brillante, más vibrante, mientras que la reducción puede llevar a una imagen más se desvaneció.
Desenfoque
El filtro de desenfoque viene en muy práctico cuando recreando la profundidad de campo en una imagen. Superposición de dos copias de la misma imagen y luego agregar un desenfoque de alrededor de 5 o 6 pixeles a la imagen de vanguardia. Entonces podemos utilizar enmascaramiento de CSS a la máscara hacia fuera la parte que queremos más en foco, revelando la imagen subyacente.
Enmascaramiento de CSS
Enmascaramiento de CSS permite especificar otro elemento gráfico, forma o archivo para ser utilizado como una región de recorte. Utilizado en conjunto con el filtro de desenfoque puede crear algunos realmente interesantes efectos de campo de profundidad.
Composición
En el 2012 vi un tweet que menciona cómo sería impresionante si podría implementar modos de color estilo Photoshop a las imágenes usando CSS. Bien, ahora, gracias a una propuesta presentada por Adobe, pronto sería posible! La propuesta es para la 'Composición CSS' y se describe como 'Mezcla y composición para la web'.
Aún no se implementa en cualquier navegador y Adobe han creado un navegador muestra que implementa y permite jugar con su propuesta. Usted puede encontrar más información en composición de Adobe. Con estos vienen todos Adobe familiar, tales como pantalla los modos de fusión, superposición y multiplicar.
Gradientes CSS
Los gradientes CSS pueden utilizarse para crear algunos tonos de superposición muy agradable para tu foto de estilo de Instagram. Utilizando un gradiente como amarillo transparente a rosa y luego cambia la opacidad de estos a veces puede dar un tinte agradable, lo que es retro de sentir y actuar de una manera similar a quemadura de la película.
Conclusión
Parece que todo el mundo en este momento está utilizando aplicaciones como Instagram para darle a sus fotos esa magia retra. No hay duda sobre ello; tus fotos hacen sentir más caliente y añadir más carácter a lo que de lo contrario podría ser imágenes bastante aburridos.
Como popularidad sigue subiendo, se introducirán más efectos y filtros. Mediante la comprensión de los conceptos básicos de cómo se logran estos efectos ahora debe ser capaz de crear para su sitio web o aplicación usando Photoshop. En el tiempo, debo imaginar que CSS tendrá toda una serie de propiedades que vamos a manipular imágenes en una manera similar. La buena noticia es mediante el uso de algunas de las propiedades que he mencionado hoy que ciertamente puede empezar a jugar un poco con algunos efectos interesantes al estilo Instagram ahora mismo.
¿Usted sabe de las propiedades CSS que pueden ser útiles para crear efectos de Instagram? ¡Me avisan en los comentarios!
Más enlaces, lectura y recursos
