Posicionando capas (layers) de manera absoluta con la ayuda de Photoshop

Para aquellos que escribimos el código de nuestras páginas sin la ayuda de programas wysiwyg tipo Dreamweaver o Golive, el posicionamiento absoluto de las capas dentro de un documento puede resultar engorroso en ciertas ocasiones.

Somos muchos los que antes de escribir el código html, maquetamos con la ayuda de herramientas de diseño gráfico nuestros diseños y no cabe duda de que Photoshop, se ha convertido en un estandard dentro del conjunto de herramientas utilizadas en el diseño gráfico.

Si bien, su uso se da sobre todo en el campo del retoque fotográfico; las posibilidades que nos ofrece a la hora de convertir y optimizar casi cualquier archivo de imagen a los formatos utilizados en la web (jpg, gif, png …); y la facilidad que el uso de sus capas nos aporta a la hora de maquetar nuestros diseños, hacen de éste una herramienta a dominar por todo diseñador web.

En este tutorial, vamos a darle una utilidad muy específica; utilizaremos Photoshop para definir la posicion absoluta x,y de una capa anidada. Vamos allá;

En este ejemplo utilizaremos la foto de una carretera como fondo de la capa contenedora y la imagen de una señal en formato PNG con transparencia (Al loro los usuarios de Internet Explorer !!) como contenido de la capa anidada.

Ventana de Capas (Layers) del Documento

Para este ejercicio será clave tener bien visible la ventana de información de Photoshop. Si no la tenéis abierta ir a ventana > informacion.

Abrir Ventana Info de Photoshop

En este panel podemos ver los valores que el cursor va tomando al moverse dentro de los ejes de coordenadas (x, y) del plano superficie del documento.

Ventana Info de Photoshop

También será fundamental tener a la vista las reglas del documento; si no tenéis visibles un par de reglas – una horizontal en la parte superior del documento y otra vertical en su parte izquierda – id a Vista > Reglas

Mostrar Reglas en Photoshop

Ahora sí, podemos definir el punto 0,0 o Center de este sistema de coordenadas; posicionando el cursor en la esquina superior izquierda del documento (donde se unen las reglas), pinchando sobre el botón izquierdo del ratón y , sin soltar, arrastrarlo al punto que deseemos se convierta en el nuevo Centro. Observad que mientras arrastrais con el botón pulsado, aparecen dos líneas cruzadas en representación de los ejes (x, y).

En nuestro caso, el punto (0,0) debe ser la esquina superior izquierda de la imagen.

Coordenadas de la capa anidada

Podemos ayudarnos de las guías que estarán a nuestra disposición si pulsamos sobre una de las reglas (vertical u horizontal) y arrastramos sin soltar hasta posicionarla en el punto que deseemos dentro del documento. Si la capa seleccionada es de menor tamaño que el documento, las guías se ajustan a los límites de ésta como un imán, cuando nos acercamos a su borde. Para borrarlas no hay mas que arrastrarlas de la misma forma, fuera del documento.

Coordenadas absolutas de la señal con respecto a la capa contenedora de 600 x 700 px

Una vez tenemos a la vista todas las ayudas visuales que disponemos, no tenemos mas que tomar la información que nos ofrece la ventana de informacón (info). Posicionamos el cursor en el punto del cual nos interesa conocer sus coordenadas (x, y) y tomamos nota para tenerlo en cuenta a la hora de escribir nuestro codigo html.

El html de este ejemplo:

<html>
<head>
<title>Posicionamiento absoluto</title>
</head>
<body><div style=”position:relative”>
<img src=”FondoCarretera.jpg” alt=”Fondo Carretera” /><div style=”position:absolute; top:6.24px; left:5.75px;”>
<img src=”Signal.png” alt=”Senial con Transparencia” />
</div></div></body>
</html>

y el resultado:

Fondo Carretera

Imagen con Transparencia
Anuncios

2 Responses to Posicionando capas (layers) de manera absoluta con la ayuda de Photoshop

  1. Hola amigo, la verdad es que me funciono perfecto. sinembargo me encantaria saber como puedo agregar otra capa. por ejemplo si quisiera que hubiera algun elemento entre la foto de la carretera y la foto de la señal. saludos.

  2. Ruben dice:

    Hola Sebastian;

    en el caso de nuestro ejemplo, tendrías que colocar la nueva capa del mismo modo que la de la señal y jugar con la propiedad z-index de las capas anidadas, siendo el z-index de la señal superior al del nuevo elemento que estaría, como comentas, situado debajo.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: