Sebastian Ferreyra

Sebastian Ferreyra

28 años. Diseño Visual & UX. Desarrollador. Artista. Renderista. Unreal Engine & Blender Developer.

design sebastian find projects visual lets portfolio video creative sebferrok DigitalArts Marketing A-ha Shell OMC Estudio Ze-k render

Reglas esenciales del diseño web que no debemos romper

Library Diseño y Desarrollo Web Cómo llamar la atención con el uso de jerarquía visual Softwares/Programas relacionados con este artículo: En el día de hoy, hay más de mil millones de sitios web a los que podemos acceder, por lo que ello implica una gran competencia para quienes buscamos lanzar el nuestro. Para destacarnos entre la multitud, nuestro sitio necesita un diseño diferencial, y especialmente porque más del 90% de las primeras impresiones van de la mano con el diseño. Cuando hablamos de diseño web, podemos ser obsesivos con su estética o por el contrario, centrarnos en un diseño más reservado. Sea cual sea el camino que elijamos, para que nuestro sitio sea exitoso debemos centrarnos en algo más que el aspecto del mismo. A continuación vamos a revisar algunas reglas esenciales para el diseño web que no deberíamos de romper o al menos, no sin saber que las estamos rompiendo. ¡Empecemos! Evitemos problemas de legibilidad Es de vital importancia que nuestros visitantes puedan leer correctamente los textos en nuestro sitio, ya que por el contrario el mensaje que queremos dar no se transmite. Apliquemos jerarquía visual Otro concepto fundamental en el diseño web es la idea de jerarquía visual. Si quieres conocer más acerca de ello, te invitamos a visitar el siguiente enlace. No te compliques demasiado con las fuentes Ya que mencionamos el tema de las fuentes, debe tenerse en cuenta que la regla general es utilizar tres fuentes o menos. Utilizar un mayor número de fuentes genera una sensación de desorden. Tener una llamada a la acción evidente Una de las primeras cosas que los usuarios deberían ver cuando visitan su sitio web es una llamada a la acción obvia (CTA). Incluye tu información de contacto Ya que mencionamos el tema de las fuentes, debe tenerse en cuenta que la regla general es utilizar tres fuentes o menos. Utilizar un mayor número de fuentes genera una sensación de desorden. Evita usar reproducción automática Si bien es cierto que el video, el audio y otras formas de medios digitales pueden agregar vida y participación a una página web, evite la función de reproducción automática. No olvidemos revisar nuestros sitios ¿Alguna vez visitaste algún sitio corporativo y encontraste algún error tipográfico evidente? Ese error tipográfico puede sacarlo directamente del contenido del sitio web y hacer que piense más en el error que la empresa dejó pasar. ¡Compartí este artículo! Últimas Entradas Reglas esenciales del diseño web que no debemos romper • Diseño y Desarrollo Web Cómo usar texturas PBR en Blender • Modelling & 3D Blender: Desactivar sombra de objetos e imágenes transparentes • Modelling & 3D Cómo llamar la atención con el uso de jerarquía visual • Diseño Gráfico y Multimedia

Reglas esenciales del diseño web que no debemos romper Leer más »

design sebastian find projects visual lets portfolio video creative sebferrok DigitalArts Marketing A-ha Shell OMC Estudio Ze-k render

Cómo usar texturas PBR en Blender

Library Diseño y Desarrollo Web Cómo utililizar texturas PBR en Blender Softwares/Programas relacionados con este artículo: ¿Estas incursionando en el mundo de los materiales de Blender? En este articulo te explico como podes utilizar las texturas PBR sin problemas, pero antes vamos a explicar brevemente que tipo de materiales tenemos a disposición. Es importante destacar que las siguientes configuraciones son compatibles tanto con los motores Cycles y Eevee. Ahora bien, ¿Como se genera la jerarquía visual? La mayoría de estos utilizan Principled Shader. Vamos a listar cada uno de ellos: Base Color: El mapa Base Color es el que define el color de una superficie. Este debería estar conectado al panel de Principled BSDF. Asegurémonos de que el archivo de la imagen que seleccionemos este configurado en color. Roughness: El mapa roughness define cuán áspera o dura es una superficie. Este debería de estar conectada en nuestro blueprint desde el panel roughness a nuestro Principeld BSDF. Adicionalmente, podemos añadir un Gamma Node para poder tener una opción adicional a la hora de configurar esta configuración. Al bajar la gama tendremos una superficie mucho más áspera y viceversa. Height: El mapa height puede ser utilizado para crear sombras detalladas sobre un material. Si buscas crear sombras detalladas, deberías conectar el panel height a nuestro Principled de la siguiente manera. Asegurémonos en este panel de seleccionar la opción “Non-Color Data”. Adicionalmente, podemos conectar también un nodo Bump para poder controlar la fuerza del efecto. Si buscas utilizar esta opción para desplazar la geometría de su objeto, debes conectarla a la entrada Height de un nodo Displacement, que luego debe conectarse a la entrada Displacement del nodo Material Output. Asegúrese de que el espacio de color del archivo de imagen también esté configurado como Datos sin color aquí. Con el control deslizante Escala del nodo Bump, puede controlar cuánto debe desplazarse la geometría. Además, asegurémonos de que el método de Displacement en la Configuración de Material esté configurado en “Solo Desplazamiento” o en “Desplazamiento y Golpe”. Normal: El mapa Normal define en qué dirección se enfrenta una parte de una superficie, que se utiliza para crear sombras y reflejos detallados. Normalmente, debe conectarse a la entrada Color de un nodo Normal Map, que luego debe conectarse a la entrada nomal del BSDF Principled. Aseguremonos de que el espacio de color del archivo de imagen esté configurado en Datos sin color. En teoría, puede utilizar un mapa normal en combinación con un mapa de altura. Recomiendo usar solo uno de ellos, ya que en la mayoría de los casos el efecto que crean es muy similar. Metallic: El mapa metallic define qué partes de un material son metálicas y cuáles no. Debe conectarse a la entrada metálica del BSDF Principled. Asegúrese de que el espacio de color del archivo de imagen esté configurado en Datos sin color. Solo los materiales que son tanto metálicos como no metálicos tienen este mapa disponible. Si un material metálico no tiene este mapa, cambie el valor metálico en Principled BSDF a 1. Ambient Occlusion: El mapa de Oclusión Ambiental (AO) se puede utilizar para simular sombras suaves en las protuberancias de una superficie. Realmente no es necesario para crear materiales realistas en Blender (especialmente con Cycles), pero aún puedes usarlo para oscurecer las pequeñas sombras en la superficie. Si buscas usar este mapa, debe multiplicarlo desde el mapa de Color base usando un nodo MixRGB, siendo el mapa de Oclusión Ambiental la segunda entrada de color, para que pueda controlar fácilmente la fuerza de este con el control deslizante del nodo MixRGB. ¡Compartí este artículo! Últimas Entradas Cómo usar texturas PBR en Blender • Modelling & 3D Blender: Desactivar sombra de objetos e imágenes transparentes • Modelling & 3D Cómo llamar la atención con el uso de jerarquía visual • Diseño Gráfico y Multimedia Cómo utilizar Chroma Key en After Effects • Diseño Gráfico y Multimedia

Cómo usar texturas PBR en Blender Leer más »

design sebastian find projects visual lets portfolio video creative sebferrok DigitalArts Marketing A-ha Shell OMC Estudio Ze-k render

Blender: Desactivar sombra de objetos e imágenes transparentes

Library Diseño y Desarrollo Web Blender: Desactivar sombra de objetos e imágenes transparentes Softwares/Programas relacionados con este artículo: En este pequeño tutorial te explico como desactivar las sombras proyectadas por un objeto a través de los motores Eevee y Cycle de Blender.https://youtu.be/zbV0lEbRQ0c ¿Aún te quedan dudas? ¡No te preocupes! Podrás dejarnos tus comentarios en la sección destinada para tal fin al pie de página. Sistema operativo utilizado: MacOS Catalina Equipo utilizado: MacBook Pro 2019, 2.3ghz i9 16GB, AMD Radeon Pro 5500M 4GB Compatible con sistema operativo: Microsoft Windows, MacOS, Linux ¡Compartí este artículo! Últimas Entradas Blender: Desactivar sombra de objetos e imágenes transparentes • Modelling & 3D Cómo llamar la atención con el uso de jerarquía visual • Diseño Gráfico y Multimedia Cómo utilizar Chroma Key en After Effects • Diseño Gráfico y Multimedia Quitar el fondo preservando detalles en una imágen con Photoshop • Diseño Gráfico y Multimedia

Blender: Desactivar sombra de objetos e imágenes transparentes Leer más »

design sebastian find projects visual lets portfolio video creative sebferrok DigitalArts Marketing A-ha Shell OMC Estudio Ze-k render

Cómo llamar la atención con el uso de jerarquía visual

Library Diseño y Desarrollo Web Cómo llamar la atención con el uso de jerarquía visual Softwares/Programas relacionados con este artículo: Una de las características esenciales de cualquier diseño eficaz es que tenga una clara jerarquía visual. La jerarquía visual es el principio de organizar elementos para mostrar su orden de importancia. En otras palabras, la jerarquía visual hace que un diseño parezca más organizado, fácil de entender, estéticamente atractivo y, también, mejora la organización de la información. Los diseñadores estructuran las características visuales para que los usuarios puedan comprender la información fácilmente. Al diseñar los elementos de manera lógica y estratégica, los diseñadores influyen en las percepciones de los usuarios y los guían hacia las acciones deseadas. Ahora bien, ¿Como se genera la jerarquía visual? Existen diferentes técnicas para crear jerarquía visual. Casi siempre no sólo se emplea una de estas técnicas, sino que se combinan. Estas técnicas son seis: tamaño, contraste, color, proximidad, alineación y repetición. – Tamaño: Los usuarios notan los elementos más grandes con mayor facilidad. La ampliación del tamaño de un objeto (sus dimensiones) y la escala (su tamaño en relación con otros objetos) es una de las formas más fáciles y efectivas de darle importancia visual. – Color: Los colores brillantes suelen atraer más atención que los apagados. Un toque brillante de un color como el rojo o el amarillo, por ejemplo, es difícil de ignorar, ya sea en una señal de tráfico en la carretera o en un cartel colgado en la cafetería. – Contraste: Los colores que contrastan fuertemente son más llamativos. – Alineación: Los elementos desalineados destacan sobre los alineados. Los elementos que se colocan en la parte superior suelen ser de mayor importancia, por eso ese lugar es el común para la barra de menú y el logo. En una tienda online, el carrito de compras también se suele ubicar en la parte superior. – Repetición: La repetición de estilos puede sugerir que el contenido está relacionado. Aunque la repetición es importante, es también esencial saber cómo romper esa repetición para generar interés, de lo contrario la página se vería demasiado estática y aburrida. – Proximidad: Los elementos colocados de cerca parecen estar relacionados. Agrupar elementos sirve para organizar tu sitio y ayudar al usuario a identificar secciones o zonas comunes. – Espacio en blanco: Más espacio alrededor de los elementos atrae la atención hacia estos. – Textura y estilo: Las texturas más ricas se destacan sobre las planas. En el diseño de la interfaz de usuario (UI), una jerarquía visual eficaz ayuda a informar, impresionar y persuadir a los usuarios, que tienen expectativas especialmente sobre la apariencia de una interfaz. Entonces, para que un sitio web, aplicación o producto relacionado tenga éxito, es crucial estructurar sus páginas o pantallas para minimizar la incertidumbre de los usuarios, mostrar la máxima empatía con ellos y darles algo agradable de ver. ¿Aún te quedan dudas? ¡No te preocupes! Podrás dejarnos tus comentarios en la sección destinada para tal fin al pie de página. ¡Compartí este artículo! Últimas Entradas Cómo llamar la atención con el uso de jerarquía visual • Diseño Gráfico y Multimedia Cómo utilizar Chroma Key en After Effects • Diseño Gráfico y Multimedia Quitar el fondo preservando detalles en una imágen con Photoshop • Diseño Gráfico y Multimedia Crear escenarios con detalles realisticos en Unreal Engine V • Modelling & 3D

Cómo llamar la atención con el uso de jerarquía visual Leer más »

design sebastian find projects visual lets portfolio video creative sebferrok DigitalArts Marketing A-ha Shell OMC Estudio Ze-k render

Cómo utilizar Chroma Key en After Effects

Library Diseño y Desarrollo Web Cómo utilizar Chroma Key en After Effects Softwares/Programas relacionados con este artículo: Adobe After Effects CC logo En este video te contamos cómo utilizar el efecto de Chroma Key (Keylight) de After Effects. https://youtu.be/0-roG_FpSyk ¿Aún te quedan dudas? ¡No te preocupes! Podrás dejarnos tus comentarios en la sección destinada para tal fin al pie de página. Sistema operativo utilizado: MacOS Catalina Equipo utilizado: MacBook Pro 2019, 2.3ghz i9 16GB, AMD Radeon Pro 5500M 4GB Compatible con sistema operativo: Microsoft Windows, MacOS, Linux ¡Compartí este artículo! Últimas Entradas Cómo utilizar Chroma Key en After Effects • Diseño Gráfico y Multimedia Quitar el fondo preservando detalles en una imágen con Photoshop • Diseño Gráfico y Multimedia Crear escenarios con detalles realisticos en Unreal Engine V • Modelling & 3D Crear efecto de luz neón con Photoshop • Diseño Gráfico y Multimedia

Cómo utilizar Chroma Key en After Effects Leer más »

design sebastian find projects visual lets portfolio video creative sebferrok DigitalArts Marketing A-ha Shell OMC Estudio Ze-k render

Quitar el fondo preservando detalles en una imágen con Photoshop

Library Diseño y Desarrollo Web Quitar el fondo preservando detalles en una imágen con Photoshop Softwares/Programas relacionados con este artículo: En este video te muestro como quitar el fondo de una imágen y lograr preservar los detalles en el corte: https://youtu.be/dxcTlKay2Hs ¿Aún te quedan dudas? ¡No te preocupes! Podrás dejarnos tus comentarios en la sección destinada para tal fin al pie de página. Sistema operativo utilizado: MacOS Catalina Equipo utilizado: MacBook Pro 2019, 2.3ghz i9 16GB, AMD Radeon Pro 5500M 4GB Compatible con sistema operativo: Microsoft Windows, MacOS, Linux ¡Compartí este artículo! Últimas Entradas Quitar el fondo preservando detalles en una imágen con Photoshop • Diseño Gráfico y Multimedia Crear escenarios con detalles realisticos en Unreal Engine V • Modelling & 3D Crear efecto de luz neón con Photoshop • Diseño Gráfico y Multimedia Cómo hacer rápidamente un efecto de iluminación con Photoshop • Diseño Gráfico y Multimedia

Quitar el fondo preservando detalles en una imágen con Photoshop Leer más »

design sebastian find projects visual lets portfolio video creative sebferrok DigitalArts Marketing A-ha Shell OMC Estudio Ze-k render

Crear escenarios con detalles realisticos en Unreal Engine V

Library Diseño y Desarrollo Web Crear escenarios con detalles realisticos en Unreal Engine V Softwares/Programas relacionados con este artículo: En este video te mostramos como poder generar escenarios (landscapes) realistas en Unreal Engine V a través de utilizar la herramienta Height Map. ¿Como creo escenarios en Unreal Engine V basandome en localizaciones reales? ¿De donde obtengo esta información? Te lo cuento…https://youtu.be/9fxevAtJIDA ¿Aún te quedan dudas? ¡No te preocupes! Podrás dejarnos tus comentarios en la sección destinada para tal fin al pie de página. Sistema operativo utilizado: MacOS Catalina Equipo utilizado: MacBook Pro 2019, 2.3ghz i9 16GB, AMD Radeon Pro 5500M 4GB Compatible con sistema operativo: Microsoft Windows, MacOS, Linux ¡Compartí este artículo! Últimas Entradas Crear escenarios con detalles realisticos en Unreal Engine V • Modelling & 3D Crear efecto de luz neón con Photoshop • Diseño Gráfico y Multimedia Cómo hacer rápidamente un efecto de iluminación con Photoshop • Diseño Gráfico y Multimedia Crear efecto de desenfoque/blur en una imágen en Photoshop • Diseño Gráfico y Multimedia

Crear escenarios con detalles realisticos en Unreal Engine V Leer más »

design sebastian find projects visual lets portfolio video creative sebferrok DigitalArts Marketing A-ha Shell OMC Estudio Ze-k render

Crear efecto de luz neón con Photoshop

Library Diseño y Desarrollo Web Crear efecto de luz neón con Photoshop Softwares/Programas relacionados con este artículo: En este video te mostramos como hacer de manera rápida y sencilla un efecto de iluminación de categoría con Photoshop. https://youtu.be/6Pcz631SCbk ¿Aún te quedan dudas? ¡No te preocupes! Podrás dejarnos tus comentarios en la sección destinada para tal fin al pie de página. Sistema operativo utilizado: MacOS Catalina Equipo utilizado: MacBook Pro 2019, 2.3ghz i9 16GB, AMD Radeon Pro 5500M 4GB Compatible con sistema operativo: Microsoft Windows, MacOS, Linux ¡Compartí este artículo! Últimas Entradas Cómo hacer un efecto de luz neón con Photoshop • Diseño Gráfico y Multimedia Cómo hacer rápidamente un efecto de iluminación con Photoshop • Diseño Gráfico y Multimedia Crear efecto de desenfoque/blur en una imágen en Photoshop • Diseño Gráfico y Multimedia Razones para tener un correo electrónico corporativo • Diseño Gráfico y Multimedia

Crear efecto de luz neón con Photoshop Leer más »

design sebastian find projects visual lets portfolio video creative sebferrok DigitalArts Marketing A-ha Shell OMC Estudio Ze-k render

Cómo hacer rápidamente un efecto de iluminación con Photoshop

Library Diseño y Desarrollo Web Cómo hacer rápidamente un efecto de iluminación con Photoshop Softwares/Programas relacionados con este artículo: En este video te mostramos como hacer de manera rápida y sencilla un efecto de iluminación de categoría con Photoshop. https://youtu.be/h4bzf9sTzpk ¿Aún te quedan dudas? ¡No te preocupes! Podrás dejarnos tus comentarios en la sección destinada para tal fin al pie de página. Sistema operativo utilizado: MacOS Catalina Equipo utilizado: MacBook Pro 2019, 2.3ghz i9 16GB, AMD Radeon Pro 5500M 4GB Compatible con sistema operativo: Microsoft Windows, MacOS, Linux ¡Compartí este artículo! Últimas Entradas Crear efecto de desenfoque/blur en una imágen en Photoshop • Diseño Gráfico y Multimedia Crear efecto de desenfoque/blur en una imágen en Photoshop • Diseño Gráfico y Multimedia Razones para tener un correo electrónico corporativo • Diseño Gráfico y Multimedia

Cómo hacer rápidamente un efecto de iluminación con Photoshop Leer más »

design sebastian find projects visual lets portfolio video creative sebferrok DigitalArts Marketing A-ha Shell OMC Estudio Ze-k render

Crear efecto de desenfoque/blur en una imágen en Photoshop

Library Diseño y Desarrollo Web Crear efecto de desenfoque/blur en una imágen en Photoshop Softwares/Programas relacionados con este artículo: En este video te mostramos como hacer de manera rápida y sencilla un efecto de iluminación de categoría con Photoshop. ¿Aún te quedan dudas? ¡No te preocupes! Podrás dejarnos tus comentarios en la sección destinada para tal fin al pie de página. Sistema operativo utilizado: MacOS Catalina Equipo utilizado: MacBook Pro 2019, 2.3ghz i9 16GB, AMD Radeon Pro 5500M 4GB Compatible con sistema operativo: Microsoft Windows, MacOS, Linux ¡Compartí este artículo! Últimas Entradas Crear efecto de desenfoque/blur en una imágen en Photoshop • Diseño Gráfico y Multimedia Razones para tener un correo electrónico corporativo • Diseño Gráfico y Multimedia

Crear efecto de desenfoque/blur en una imágen en Photoshop Leer más »