Galerna Estudio Blog. Diseño Web Asturias (Gijón) y Cantabria (Santander) » paginas http://www.galernaestudio.com/blog II► ★★★★ Artículos y asesoramiento sobre diseño gráfico, páginas web, fotografía, vídeo, posicionamiento, hosting, dominios, marketing web y noticias desde Cantabria (Santander) y Asturias (Gijón y Oviedo). Fri, 03 Feb 2012 15:32:06 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Introducción a la conversión de una maqueta PSD en un documento XHTML-CSS válido http://www.galernaestudio.com/blog/introduccion-a-la-conversion-de-una-maqueta-psd-en-un-documento-xhtml-css-valido/ http://www.galernaestudio.com/blog/introduccion-a-la-conversion-de-una-maqueta-psd-en-un-documento-xhtml-css-valido/#comments Tue, 12 Jan 2010 17:43:22 +0000 Galerna Estudio http://www.galernaestudio.com/blog/?p=625 El mundo del diseño y la programación web se encuentran a menudo en su camino diario hacia el desarrollo de nuevos y mejores diseños que el usuario pueda disfrutar no sólo por su atractivo, sino también por su facilidad de uso. Gracias a Photoshop se pueden realizar maquetas para diseño web de una gran calidad gráfica aunque para su uso en Internet mediante las mejores técnicas de programación actuales, es necesario convertirlas en algo funcional y manipulable por los editores de texto. Este artículo, a modo de introducción, pretende explicar las fases a tener en cuenta en el proceso de conversión de estas maquetas del formato de Photoshop PSD a XHTML-CSS así como algunos factores importantes que rodean este proceso.

La conversión de maquetas gráficas a documentos web que separan la presentación de los contenidos, es uno los ámbitos que mas en auge se encuentra debido a la gran demanda que ello suscita. Es tal la demanda existente, que incluso han surgido una ampliar variedad de empresas en Internet que se dedican a este trabajo. Algunas, como www.psd2html.com, realizan la tarea en tan sólo unas horas.

Antes de empezar hay que decir que existen varias formas de realizar esta operación. Por un lado, existe un plugin de Photoshop llamad SiteGrinder que permite realizar esta operación de una forma particular. Encontraras un videotutorial que explica esta técnica en la dirección http://www.medialab.com/sitegrinder/screenmovies/.
Por otro lado, existe una forma en la que el usuario se vale de la propia herramienta de Photoshop pero sin la ayuda de plugins adicionales., sólo Photoshop.

Es muy importante que cuando trabajemos con maqueta o si incluso realizamos una nosotros mismos, escojamos para esta, una resolución de 72 dpi (píxeles/pulgada) ya que el objetivo del diseño de nuestro archivo final es su visualizción en el navegador, esto en el monitor.
Para trabajar en la creación de estos archivos a partir de maquetas, necesitaremos establecer las guias de Photoshop, que nos permitirán medir las distancias en nuestra maqueta. Con CTRL-R podrás visualizar las guías en tu maqueta PSD.

Los sectores es otro de los conceptos básicos que manejarás cuando trabajes con Photoshop y que te permitirán delimitar las diferentes zonas o regiones en que dividiras tu maqueta. Las zonas comunes a realizar son el logo, la cabecera, la botonera, el área de contenidos y el pie de página.

Antes de continuar una reseña.
En mi opinión, no hay que obsersionarse con tratar de realizar diseños complejos en Photoshop. Últimamente se están viendo por Internet diseños web extremadamente complejos que aunque son de una gran calidad, dificultan la navegación a ciertos tipos de usuarios, dejando de la lado la usabilidad, uno de los principales objetivos que debe cumplir un buen sitio web. Un sitio web equilibrado entre un diseño atractivo y a la vez que ponga el acento en la usabilidad tendrá sin duda un gran futuro y será muy valorado por todo tipo de usuarios.

Para poder continuar con el artículo, necesitaremos desarrollar nuestra maqueta, que puede ser simplemente una estructura convencional de página, con su cabecera, menú, cuerpo principal y pie de página.

A partir de este punto se comienza a dividir en regiones nuestra maqueta, valiéndonos del uso de sectores que sean formas vectorizadas. De esta forma con la herramienta Sector (K) de la barra de herramientas, iremos seleccionando una a una cada una de las regiones mas importantes de nuestro archivo PSD, estas son la cabecera (con el logo), el menú, las zonas principales de contenidos de texto….  No te olvides de ir guardando a cada paso lo que hayas realizado con anterioridad.

Una vez hecho esto, entraríamos en la parte en la que pasaríamos a convertir la maqueta gráfica en un documento web XHTML-CSS. Este paso puede ser un poco confuso ya que requiere trasladar cada región de la propia maqueta a un elemento del código del documento web CSS. Esto significa que por cada elemento que hayamos creado en la maqueta, deberemos crear una referencia en el documento CSS. El documento CSS es el encargado de fijar las características de presentación de los elementos de la maqueta, es todo es, establecer la altura, anchura, alineación, … de cada una de las regiones en que hemos dividido nuestros futuro sitio web. El documento XHTML lo obtendremos generandolo con con el propio Photoshop.

Pero, no nos adelantemos. Nos encontramos en uno de los pasos críticos de este proceso. Como ya hemos dicho, a grandes rasgos, deberás crear una referencia con un nombre en el documento CSS por cada región que hayas establecido en la maqueta y deberás asignarlas los parámetros de altura y anchura valiéndote de las guías. La alineación será en la mayoría de los casos a la izquierda (float:left;).

Aquí te presento el aspecto que tiene un clásico documento CSS al terminarse la presentación de los elementos principales.

html, body {margin: 0;padding: 0; }
#contenedor { width: 760px; margin: auto;}#cabecera {height: 150px;}
#menu {height: 50px;}
#contenidos {background: green;}
#pie {height: 66px;}

Los dos primeros elementos, establecen la zona principal donde se va a encuadrar el resto de elementos que hemos establecido en la maqueta. Los valores son de ejemplo y tu deberías fijar los tuyos en base al espacio que les hayas dado para tus necesidades particulares.

Para ello vamos a presionar por unos segundos el botón de la herramienta Sector, que desplegará una segunda opción llamada “Seleccionar Sector”. La elegimos y con ella podremos hacer clic en cada sector sobrante, al tiempo que movemos por medio de los manejadores los sectores que queremos hacer más grandes (que ocupen varios casilleros).

En la última parte del proceso, haremos uso de la opción Guardar para la web y dispositivos que nos ofrece Photoshop. Guardaremos la maqueta que hemos sectorizado pudiendo elegir el formato de cada uno de los imágenes por separado. El menú para guardar, daremos nombre al documento y justo en el menu desplegable inferior, seleccionamos “HTML e imágenes”. A su vez en el menú inferior de este, llamado Ajustes, seleccionaremos “XHTML”.

Existe una opción que nos permite, crear la hoja CSS además del propio documento XHTML, por lo que tendrás que valor que método te resulta más sencillo.

Recuerda que este artículo está enfocado a darte una visión de la metodología, las herramientas y las técnicas que utilizaras durante el proceso. Para conocer a fondo como realizar este proceso puedes dirigirte a esta dirección, donde con la ayuda de una maqueta de prueba, conocerás paso a paso y detalladamente (con código), todas las fases requeridas para obtener un documentos XHTML-CSS válido a partir de un archivo PSD.

El mundo del diseño y la programación web se encuentran a menudo en su camino diario hacia el desarrollo de nuevos y mejores diseños que el usuario pueda disfrutar no sólo por su atractivo, sino también por su facilidad de uso. Gracias a Photoshop se pueden realizar maquetas para diseño web de una gran calidad gráfica aunque para su uso en Internet mediante las mejores ténicas de programación actuales, es necesario convertirlas en algo funcional y manipulable por los editores de texto. Este artículo, a modo de introducción, pretende explicar las fases a tener en cuenta en el proceso de conversión de estas maquetas del formato de Photoshop PSD a XHTML-CSS así como algunos factores importantes que rodean este proceso.

La convesión de maquetas gráficas a documentos web que separan la presentación de los contenidos, es uno los ámbitos que mas en auge se encuentra debido a la gran demanda que ello suscita. Es tal la demanda existente, que incluso han surgido una ampliar variedad de empresas en Internet que se dedican a este trabajo. Algunas, como www.psd2html.com, realizan la tarea en tan sólo 8 horas.

Antes de empezar hay que decir que existen varias formas de realizr esta operación. Por un lado, existe un plugin de Photoshop llamad SiteGrinder que permite realizar esta operación de una forma particular. Encontraras un videotutorial que explica esta técnica en la dirección http://www.medialab.com/sitegrinder/screenmovies/.

Por otro lado, existe una forma en la que el usuario se vale de la propia herramienta de Photoshop pero sin la ayuda de plugins adicionales., sólo Photoshop.

Es muy importante que cuando trabajemos con maqueta o si incluso realizamos una nosotros mismos, escojamos para esta, una resolución de 72 dpi (píxeles/pulgada) ya que el objetivo del diseño de nuestro archivo final es su visualizción en el navegador, esto en el monitor.

Para trabajar en la creación de estos archivos a partir de maquetas, necesitaremos establecer las guias de Photoshop, que nos permitirán medir las distancias en nuestra maqueta. Con CTRL-R podrás visualizar las guías en tu maqueta PSD.

Los sectores es otro de los conceptos básicos que manejarás cuando trabajes con Photoshop y que te permitirán delimitar las diferentes zonas o regiones en que dividiras tu maqueta. Las zonas comunes a realizar son el logo, la cabecera, la botonera, el área de contenidos y el pie de página.

Antes de continuar una reseña.

En mi opinión, no hay que obsersionar con tratar de realizar diseños complejos en Photoshop. Ultimamente se están viendo por Internet diseños web extremadamente complejos que aunque son de una gran calidad, dificultan la navegación a ciertos tipos de usuarios, dejando de la lado la usabilidad, uno de los principales objetivos que debe cumplir un buen sitio web. Un sitio web equilibrado entre un diseño atractivo y a la vez que ponga el acento en la usabilidad tendrá sin duda un gran futuro y será muy valorado por todo tipo de usuarios.

Para poder continuar con el artículo, necesitaremos desarrollar nuestra maqueta, que puede ser simplemente una estructura convencional de página, con su cabecera, menu, cuerpo principal y pie de página.

A partir de este punto se comienza a dividir en regiones nuestra maqueta, valiéndonos del uso de sectores que sean formas vectorizadas. De esta forma con la herramienta Sector (K) de la barra de herramientas, iremos seleccionando una a una cada una de las regiones mas importantes de nuestro archivo PSD, estas son la cabecera (con el logo), el menú, las zonas principales de contenidos de texto…. No te olvides de ir guardando a cada paso lo que hayas realizado con anteriridad.

Una vez hecho esto, entraríamos en la parte en la que pasaríamos a convertir la maqueta gráfica en un documento web XHTML-CSS. Este paso puede ser un poco confuso ya que requiere trasladar cada región de la propia maqueta a un elemento del código del documento web CSS. Esto significa que por cada elemento que hayamos creado en la maqueta, deberemos crear una referencia en el documento CSS. El documento CSS es el encargado de fijar las características de presentación de los elmentos de la maqueta, es todo es, establecer la altura, anchura, alineación, … de cada una de las regiones en que hemos dividido nuestros futuro sitio web. El documento XHTML lo obtendremos generándolo con con el propio Photoshop.

Pero, no nos adelantemos. Nos encontramos en uno de los pasos críticos de este proceso. Como ya hemos dicho, a grandes rasgos, deberás crear una referencia con un nombre en el documento CSS por cada región que hayas establecido en la maqueta y deberas asignarlas los parametros de altura y anchura valiéndote de las guías. La alineación será en la mayoría de los casos a la izquierda (float:left;).

Aquí te presento el aspecto que tiene un clásico documento CSS al terminarse la presentación de los elementos principales.

html, body {margin: 0;padding: 0; }

#contenedor { width: 760px; margin: auto;}


#cabecera {height: 150px;}

#menu {height: 50px;}

#contenidos {background: green;}

#pie {height: 66px;}

Los dos primeros elementos, establecen la zona principal donde se va a encuadrar el resto de elementos que hemos establecido en la maqueta. Los valores son de ejemplo y tu deberías fijar los tuyos en base al espacio que les hayas dado para tus necesidades particulares.

Para ello vamos a presionar por unos segundos el botón de la herramienta Sector, que desplegará una segunda opción llamada “Seleccionar Sector”. La elegimos y con ella podremos hacer clic en cada sector sobrante, al tiempo que movemos por medio de los manejadores los sectores que queremos hacer más grandes (que ocupen varios casilleros).

En la última parte del proceso, haremos uso de la opción Guardar para la web y dispositivos que nos ofrece Photoshop. Guardaremos la maqueta que hemos sectorizado pudiendo elegir el formato de cada uno de los imágenes por separado.

El menu para guardar, daremos nombre al documento y justo en el menu desplegable inferior, seleccionamos “HTML e imagenes”. A su vez en el menú inferior de este, llamado Ajustes, seleccionaremos “XHTML”.

Existe una opción que nos permite, crear la hoja CSS además del propio documento XHTML, por lo que tendrás que valor que método te resulta más sencillo.

Recuerda que este artículo está enfocado a darte una visión de la metdología, las herramientas y las técnicas que utilizaras durante el proceso. Para conocer a fondo como realizar este proceso puedes dirigirte a esta dirección, donde con la ayuda de una maqueta de prueba, conoceras paso a paso y detalladamente (con código), todas las fases requeridas para obtener un documentos XHTML-CSS válido a partir de un archivo PSD.



]]> http://www.galernaestudio.com/blog/introduccion-a-la-conversion-de-una-maqueta-psd-en-un-documento-xhtml-css-valido/feed/ 0 Galerna Estudio editará un programa para la televisión andaluza http://www.galernaestudio.com/blog/galerna-estudio-editara-un-programa-para-la-television-andaluza/ http://www.galernaestudio.com/blog/galerna-estudio-editara-un-programa-para-la-television-andaluza/#comments Tue, 22 Dec 2009 16:21:00 +0000 Galerna Estudio http://www.galernaestudio.com/blog/?p=751 Galerna Estudio ha sido seleccionada para editar unas 6 horas de filmaciones que serán presentadas mediante un formato de programa televisivo en la televisión de la comunidad andaluza.

Se renueva así la confianza con Galerna Estudio, ya que se trata del mismo cliente para el que se realizó un anuncio comercial expuesto en la misma televisión.



]]> http://www.galernaestudio.com/blog/galerna-estudio-editara-un-programa-para-la-television-andaluza/feed/ 0