Como habrán notado, un nuevo look ha arribado !… doy la bienvenida a la versión 4 de ConfiguracionVisual.com , el espacio donde publico mi material fotográfíco.

Si bien el diseño visual lo tenía un 95% terminado en enero, recién esta semana que pasó logré retomar el proyecto y poder hacer el traspaso a código, paso necesario para pasar del paper a lo “real” que están viendo ahora.

Vayamos por partes….

Todavía falta corregir detalles para <IE8 …  más allá de esto, le recomiendo a los usuarios de Internet Explorer que utilicen navegadores modernos como Chrome o Firefox.

NUEVO IMAGOTIPO

El nuevo look v4 trajo acompañado un cambio en el imagotipo tambien… La idea del cambio fue para corregir los errores que contaba la versión anterior, maximizar la simpleza y lograr una mejor optimización para su uso en distintos medios y tamaños. A contnuación una comparación y el proceso de la forma…

NUEVO LOOK: portada

Adentrándonos en el nuevo diseño web, veamos una comparación de la página de inicio en versión 3 con la 4.

El principal cambio fue la eliminación de la sidebar, aplicando en su lugar 3 columnas: los 3 posts más recientes luego del ultimo (mostrado en grande a la izquierda), 3 posts de la categoría “featured” y los 3 posts más visitados.

Otro gran cambio fue el menú, que al retirarlo visualmente logré más espacio y limpieza en el header, pero a su vez, una mejor organización entre las categorías propias de “fotografía” (sólo material fotográfico) y el resto (artículos, videos, colecciones, tutoriales…tambien de mi autoría ).

A su vez, la altura general ha sido reducida al 50%, por lo que los usuarios no deben hacer scroll (quienes tengan 1024×768 de resolución en su monitor, apenas deben hacerlo). La información está mejor distribuida y clara, al instante que carga el website.

No puedo dejar de nombrar el importante uso de nuevas tipografías y la elección de la paleta de colores, gracias a ellos se pueden diferenciar claramente las distintas áreas y paneles disponibles.

NUEVO LOOK: post

En la página individual, en la que se muestra los post’s/publicaciónes tambien ha sido renovada. En este caso mantuve varios recursos de la versión anterior ya que en su momento habían sido cambios importantes y sentí que debían ser usados nuevamente. Podría nombrar: el panel superior con post’s recientes/mas visitados, usar el ancho de la página para el ancho del área del post (permitiendo que las imágenes se muestren en 900px de ancho), el área de titulo (fecha, breadcrumb, cambiar fondo), el panel de post relacionados al que se está viendo y finalmente el área de comentarios (sin cambios con respecto a la version anterior).

Los cambios nuevos principalmente son 3: la integración del botón “me gusta” de facebook y el de “retweet” en cada post, el uso de un panel flotante a la derecha que nosa compaña cuando hacemos scroll (subir, cambiar fondo e ir al área de comentarios) y una featured que hace que cuando hacemos scroll hacia abajo y terminamos de ver el post, éste se apaga (fade out) y se prenden (face in) las áreas de post’s relacionados y de comentarios. Es una manera de decirle al usuario “has terminado de ver el post, ahora peudes seguir mirando otros o aprovechar y comentar que te ha parecido el mismo”

NUEVO LOOK: archivo / búsqueda

En este caso, mantuve la navegación por páginas de 9 posts cada una, mostrándolos en una grilla de 3×3. Han sido refinadas las cajas contendoras y el área de navegación (paginación) para que tengan coherencia con el resto del website. Como siempre, las imágenes representativas de cada post son las protagonistas… son la información más clara y rápida que puede obtener el usuario.

PALABRAS FINALES

Espero  que éste haya sido un beneficioso upgrade, tengo toda la esperanza de que es así y que será recibido bien por ustedes !!!

Mi deseo es que les guste el nuevo diseño y que con éste le sea aún más cómoda la navegación por el website…. asique bienvenidos nuevamente a todos y espero que disfruten la estadía recorriendo mi material fotográfico !

saludos !!

Sí, como han leído, me alegro en presentarles hoy la ultima versión de mi portfolio fotográfico, que después de un mes y medio de ir de a poco definiéndolo, hoy ya está online para ser visto por todos.

El mismo ha sido (lo he) rediseñado desde 0, una vuelta de hoja completa principalmente en el código y las funcionalidades, pero tambien con un recambio en el material fotográfico presentado.

Asi es que pueden ir ahora directamente a ver mi Portfolio, o para los interesados, seguir leyendo este post en el cual comento un poco de que se trató el presente rediseño, las nuevas funcionalidades y un paso a paso sobre el uso de las mismas.

Las principales features de la presente versión son:

• Es más fácil ver las fotografías, las mismas se pueden expandir y contraer rapidamente, sin necesidad de cambiar de página o usar ventanas modales (como fancybox).
• Las categorías se convirtieron a “filtros”; al hacer clic sobre una de ellas, las imágenes pertenecientes a dicha categoría son filtradas del resto.
• Las miniaturas se muestran aleatoriamente en cada recarga del portfolio, de esta manera se disminuye el riesgo de que ciertas imágenes queden en el fondo de la página y nunca sean vistas.
• El layout es versátil, acomodándose las miniaturas acorde a la resolución del monitor, incluso al redimensionar la ventana manualmente.
• La sección Making Of fue repensada, ahora todo está en una sola página accediendo cómodamente al video como a la imágen final
• La sección BEFORE/AFTER es de lo más destacado del rediseño, en la misma se puede ver fácilmente la comparación entre la imagen original vs la imagen final
• No hay uso de animaciones Flash ; iPhone/iPad ready

; y todo esto con suaves animaciones !
si te gustó lo que viste, podes hacérmelo saber haciendo clic sobre el corazón !

Principales features sobre el diseño-web/código:

• He usado HTML5 y CSS3, junto al framework jQuery para las animaciones y Ajax.
• Ie8 , Firefox 3.6+ , Chrome . La mejor performance la he notado utilizando Chrome. En IE7 hay cosas por corregir…
• El layout fluído de las miniaturas y filtrado es gracias a jQuery Masonry, mientras que el método de expandir/contraer es una adaptación del código provisto por Mot Tie (script)
• Para el formulario de contacto he usado “Super AJAX Contact Form“
• Para la sección Before/After he usado las tabs con Ajax de “jQuery Tools” junto a “jQuery Before/After“
• Para el “me gusta” he usado “ThumbsUp“
• Para los fades en los mouse-hover he usado la técnica comentada en shopdev.co.uk
• Para el scroll animado he usado “jQuery ScrollTo“
• Para optimizar el tamaño de las imágenes he usado Smushit, mientras que para el CSS y Js he usado YUI Compressor

Paso a Paso

La página inicial del Portfolio, un layout en grilla dejando en claro que las  imágenes son las protagonistas.
El fondo siempre se mantiene en gris oscuro (#1f1f1f), las tipografias en general son sin color (blanco/gris/negro) y los detalles gráficos son en verde (#92EE92) o celeste (#69ECFF):

Si bien creo suponer no es necesario explicar el comportamiento que los usuario puedan tener, paso a listar gráficamente las funcionalidades que cuenta este rediseño:

En la barra superior se encuentran las categorias, en la que se puede filtrar las fotografías según la elegida. A la derecha el menu secundario, con Contacto, Twitter, Info…

Las fotografías se pueden expandir y contraer rapidamente para verlas a mayor tamaño, sin necesidad de cambiar de página o usar ventanas modales:

La sección BEFORE/AFTER es de lo más destacado del rediseño, en la misma se puede ver fácilmente la comparación entre la imagen original vs la imagen final:

La sección Making Of fue repensada, ahora todo está en una sola página accediendo cómodamente al video como a la imágen final:

Espero que les haya gustado esta review, pero más importante espero que les haya gustado el diseño y usabilidad del portfolio asi como tambien el material fotográfico que he desarrollado hasta el momento.

saludos !

Photoshop, líder indiscutible en el segmento gráfico de retoque digital, ya nos había asombrado con su herramienta Content-Aware Scale en su actual version CS4 (creada originalmente por Ariel Shamir), que gracias a un algoritmo nos permite escalar/redimensionar una imagen inteligentemente sin que se deformen ciertas áreas a gusto. Para entender de manera fácil lo que acabo de mencionar, por favor ver este video.

Photoshop CS5, la futura versión que según Piper Jaffray se lanzará en Abril de 2010, puede que nos traiga algo aun más poderoso. Adobe junto a colaboradores de  la Universidad de Princeton y la Universidad de Washington, tienen planeado el lanzamiento dentro de Photoshop CS5 de lo que han llamado PatchMatch, un algoritmo complejo para la manipulación de imágenes, capas de encontrar rápidamente correspondencias entre todas las partes (patchs) de dos regiones diferentes de una imagen.

Las claves de este proyecto es que se pueden encontrar correspondencias a través de un muestreo aleatorio, y que la coherencia natural en las imágenes permita propagar tales correspondencias rápidamente a las zonas cercanas. El logaritmo es la base para una variedad de herramientas desarrolladas: image retargeting, completion y reshuffling (reorientado, completado y recomposición) que se pueden utilizar dentro de una aplicación de edición gráfica de alto nivel.

Por último, se proponen opciones adicionales intuitivas en el proceso de edición que ofrecen al usuario un fácil control ausente en los métodos anteriores creados, de este modo el usuario ayudará y guiará a la herramienta para que realice mejor su trabajo.

A continuación imágenes y el video demostración de la nueva herramienta llamada PatchMatch y que posiblemente se encuentre en Photoshop CS5

Reorientado (retargeting)

Básicamente es similar a lo producido por la herramienta ya incluída Content-Aware Scale en Photoshop CS4.  Nos ayuda a redimensionar una imagen protegiendo zonas de deformaciones no queridas. PatchMatch permite evitar errores, en especial con lineas en la imágenes, dejando al usuario indicar éstas para que PatchMatch proteja su geometría.

Completado (completion)

Aquí vemos un avance significativo, permitiendo reconstruír zonas en base a otras tomadas como referencia. El logaritmo ha mejorado la busqueda de estas correspondencias, logrando una alta eficacia sin que ello nos demore mucho tiempo. El punto fuerte es la rapidez con que estos procesos son llevados a cabo, que nos brindan una poderosa herramienta y agiliza nuestro flujo de trabajo en estos casos de retoques digitales.

Recomposición (reshuffling)

Si lo anterior nos sorprende, esta opción es impresionante. Simplificando, podría decirse que el usuario puede mover zonas/objetos dentro de una imagen sin que se note la alteración.
Para esto, PatchMatch no solo busca y encuentra correspondencias de la zona elegida a través de un muestreo aleatorio; sino que a partir de la reubicación del objeto/zona primitiva en otro lugar de la imagen, la herramienta acondiciona la zona aledaña a aquella para que la imagen final no muestre desfasajes. Vea el video para lograr entender más esta sorprendente funcionalidad de PatchMatch.

PatchMatch

Video Demostración

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Para una completa comprensión del proyecto, está disponible un PDF con detalles del proyecto.

Fuente: CS5.org | Página Oficial

Adobe acaba de lanzar una nueva aplicación de escritorio llamada “Adobe Shortcut App for Creative Suite” (Aplicación de Atajos de Teclado para Adobe Creative Suite), desarrollada en AdobeAir y la que nos permite buscar, anotar, y más que nada recordar los atajos de teclado para los programas que utilizamos de Adobe.

Es muy interesante para quienes recientemente se inician con los programas de Adobe o quienes poco le dan importancia a la utilidad de los atajos de teclado.
Nos ahorra tiempo si es que nos olvidamos algún atajo de teclado o si directamente estamos haciendo algo y queremos averiguar si existe una manera más rápida y fácil de acceder a dicha acción.  Previamente a esta aplicación, un gran recurso era acudir a la lista de atajos en formato PDF realizada por Trevor Morris.

No creo que esta aplicación la usemos todo el tiempo, pero es buena tenerla, pesa poco (4.6mb) y es muy fácil de usar.

Es hora de instalarla! sigue estos pasos:

1) Lo que primero haremos es ir a la página oficial de la aplicación, “Adobe Shortcut App for Creative Suite“

Una vez allí, haremos click en “Download from Publisher” para que nos aparezca la ventana “popup” de descarga (ventana característica de las aplicaciones desarrolladas en Adobe Air). Deberemos tener instalado primero AdobeAir, de lo contrario,  primero nos va a pedir que instalemos este antes de proceder (link para descargar Adobe Air):

2) Al hacer clik, nos aparecerá la ventana “popup” de descarga, dar click en “Abrir“:

3) Una vez instalada la aplicación, veremos su icono en nuestro escritorio, doble click sobre él para abrirla:

4)Ya abierta, esta es la interfase gráfica de la nueva aplicación de Adobe, donde podremos ver los iconos pertenecientes a todas los programas de la Suite de Adobe:

5)Al hacer click sobre alguno de los iconos, podremos ver la lista de atajos de teclado disponibles:

• ESSENTIALS: nos muestra aquellos particulares del programa de la Suite que estamos viendo.
• MY FAVOURITES: nos muestra los atajos de teclado que hemos seleccionado como favoritos.
• ALL CATEGORIES: nos muestra todos los atajos disponibles para el programa de la Suite que estamos viendo.

6)Como verán, al escribir en el área de búsqueda, la aplicación nos muestra los atajos que concuerdan con lo que estemos tipeando (“autosuggest search“… un recurso rápido y muy efectivo, y en tiempo real).
A modo de ejemplo, a continuación estoy buscando dentro de Photoshop CS4 los atajos de teclado que contengan en su nombre la palabra “brush” (pincel):

Espero que hayan encuentrado esta aplicación interesante, quizás le den una bienvenida a su workflow, quien sabe…

Seguime en Twitter para estar al día: SEGUIME

Follow me on Twitter and stay updated: FOLLOW ME

Despues de varios años, he decidido rediseñar el logo de ConfiguracionVisual.com ; no soy diseñador gráfico asique he hecho lo que estaba a mi alcance jejee

La idea fue que trasmita semántica moderna contenida en una forma simple remitiendo a las iniciales “C” y “V“.  Iniciando el proceso con un círculo y una linea a 60º, poco a poco fui llegando a la forma final, para luego elegir el color y las sombras (dándole volumen). Espero que sea de agrado y que su vida útil sea próspera :D

A continuación, el logo anterior y el actual… y luego el proceso paso a paso:

]]> http://www.configuracionvisual.com/2009/04/07/configuracionvisual-nuevo-logo/feed/ 2 http://www.configuracionvisual.com/2009/04/05/de-dattatec-a-spry/ http://www.configuracionvisual.com/2009/04/05/de-dattatec-a-spry/#comments Sun, 05 Apr 2009 23:41:18 +0000 dlv http://www.configuracionvisual.com/?p=1301

Luego de un par de días offline, finalmente el pasaje de hosting Dattatec.com a Spry.com ha terminado… se demoró no por el pasaje de archivos, sino por el cambio de DNS’s (justo el dominio estaba en periodo de renovación) y la final propagación en la net de estos.

El pasaje de servicio de hosting fue principalmente por los cuelgues continuos sufridos en los ultimos meses, el site estaba intermitente casi todo el tiempo. Esto no se a que se debió, si por el caudal de visitas (no creo), por el uso de php y base de datos, etc. Previamente no tuve inconvenientes con Dattatec.com :  su plan “Diseño”, sus métodos de pago y su soporte técnico son óptimos (Demianluisvillanueva.com lo sigo hosteando con Dattatec, no he notado intermitencia en el servicio).

Por otro lado,  el servicio de Spry.com (Seattle, Washington, EE.UU.) por ahora no me presentó graves problemas… y los pequeños inconvenientes que he tenido el soporte técnico (en inglés) ha respondido perfectamente, con un tiempo de respuesta que me ha asombrado (comparado al de Dattatec) por lo rápido… al punto de parecer que uno esta chateando.

El plan que adquirí es el Intermediate, que lo unica contrá puede llegar a ser que es posible tener una sóla base de datos, pero hasta ahora no he necesitado de otra (WordPress usa una), asique no hay problemas. El server al ser del extranjero, los tiempos de respuesta fuera de Argentina son mejores que antes; todavia me falta chequear la performance dentro de Argentina.  Sin más, termino esta pequeña reseña de lo que fue el pasaje y el porque del offline de estos días… en breve habrá nuevo material en el site.

Adenim se llamado a este ultimo trabajo que he hecho, el cual convino fotografía y 3D junto al retoque digital en Photoshop.

La idea la tenía archivada y finalmente ayer la retomé para terminarla, como así tumbién el video del making of en donde se puede ver la mayorí­a del proceso de realización.

No es la gran cosa, pero sí me sirvió para salir un poco de lo común y sumarlo al portfolio personal.

Software:

• Rhinoceros 3D
• Photoshop CS3

El Making Of de “adenim“ lo pueden ver aquí.

Adenim is the name of my recent project, in which I have convined photography, 3D and digital retouching.

The idea was shelved and finally i’ve finished yesterday, in the same way i’ve created the making of video showing most of the process.

[ratings]

Captura de Video HD

La nueva Canon EOS 5D Mark II es la primera cámara de Canon SLR en incorporar la posibiolidad de grabar video en Alta Definición [HD] a 1920×1080 . Una vez comenzada la grabación con el Live View activado, uno pude tomar fotografías mientras tanto el video continuará grabandose una vez terminado el ultimo disparo.

“REVERIE” – Vincent Laforet

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Download [72mb]

Behind the Scenes “REVERIE“

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Download [36mb]

Canon EOS 5D Mark II hands on EXCLUSIVE

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Canon EOS 5D Mark II + EF85mm F1.2L

Canon EOS 5D Mark II + EF 15mm F2.8 Fisheye

Bora Lane – “Julia” (por Andreas Isenegger)

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

[There is a video that cannot be displayed in this feed. Visit the blog entry to see the video.]

Original

• 21.1 Megapixel sensor CMOS con Sistema de Limpieza Integrado EOS mejorado (E.I.C.S.)
• Grabación de video HD 1080 de resolución.
• 3.9 Cuadros por segundo en rafaga continua
• Procesador de iamgen DIGIC 4
• Máximo de 310 JPEG en una sóla ráfaga [usando una tarjeta UDMA [Ultra Direct Memory Access]
• Live View
  
• Pantalla LCD de 3.0” VGA (920.000 puntos)
• ISO 100-6400 (expandible desde 50 hasta 25,600)
• 9 puntos de AutoFoco + 6 puntos de AutoFoco asistido
• Precios del Body sólo: US: $ 2,699, EU: € 2,499, UK: £ 2,299.

[en]

HD video capture

The new EOS 5D Mark II is Canon’s first D-SLR to incorporate full HD 1920×1080 video capture. Once filming is started from Live View mode, photographers can fire off either single or continuous stills, with video capture continuing after the final frame is captured.

• New 21.1 Megapixel CMOS sensor with improved EOS Integrated Cleaning System (E.I.C.S.)
• New Full HD 1080 resolution movie recording
• 3.9 frames per second continuous shooting
• High performance DIGIC 4 providing superb image quality
• Maximum 310 large JPEG images in a single burst with a UDMA card
• 3.0” VGA (920k dots) Clear View LCD
• ISO 100-6400 (expansion from 50 up to 25,600)
• 9 AF points + 6 Assist AF points
• Body-only prices: US: $ 2,699, EU: € 2,499, UK: £ 2,299.

Vía:

Mientras tanto, lo que habia dejado stand-by durante un tiempo, en estos días finalmente terminé con mi sitio personal de diseño industrial [lo que realmente estudio :)]. Es por ello que los invito a pasar y ver un poco de por ahora mi pequeño portfolio sobre este rubro. Si ven algun error o algo por mejorar, pueden hacermelo llegar dejando un mensaje aquí…gracias.

Meanwhile, finally i this days i finished my little personal industrial design portfolio [yes, i study ID]…So I invite you to visit it and enjoy looking some of my projects. If you see some bug or something to be better, you can leave a message telling me your feeling…thanks